作爲一個蹩腳前端，已經接觸過一段時間EasyUI了，這個框架其實很老了，基本都是一些原生JS操作。我也只能一葫蘆畫瓢了，有些前端的原理其實並不是那麼的理解，但是一般來說基本還是能搞定的，百度下，copy下。這邊就記錄下一些坑，以便日後查看，也有個借鑑。
DataGrid 組件
定義 表 ：<table id="id" style="width: auto; height: 100%"></table>
工具欄定義 <div id="toolbar_id" style="padding: 2px 2px; position: relative;"></div>
$("#id").datagrid({ //指定ID
method : 'post', --- 請求方式
url : 'xxxx', -- 路徑
fitColumns : false,
border : true,
pagination : true,
idField : 'noticeId',
pageSize : 30,
pageList : [ 30, 40, 50, 60, 70 ],
rownumbers : true,
singleSelect : true,
collapsible : true,
striped : true,
remoteSort : true,
queryParams : { -- 默認請求參數
xxx: xx,
yyy : yy
},
view:detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="ddv-' + index + '"></table>
</div>';
},
onLoadSuccess: function, -- 請求成功之後
toolbar : '#toolbar_id', -- 工具欄
frozenColumns : [ [ {
title : '字段描述', -- 描述
field : 'xxx',
hidden : true,
width : 120,
align : 'center',
halign : 'center',
sortable : true
},
...
]]
})；
//1、動態修改URL
var op = $("#id").datagrid("options");//獲取 option設置對象
op.url = url;
// 重新加載 帶參數parms{a:a,b:b}
$('#id').datagrid('reload', parms);
//2、動態修改字段 colums =[[{..}]];
$("#id").datagrid({columns:colums});
ComBox組件
<input id="id" class="easyui-combobox" style="width:80px;" data-options="editable:false ;panelHeight:'auto'"
/>
var data; // 異步請求
$.ajax({
method:'get',
url:'xxx',
dataType : 'json',
type : 'POST',
async:false,
success: function (data){
data = data;
}
});
$("#id").combobox({
prompt:'輸入關鍵字後自動搜索',
method:'get',
url:'xxx',
editable:true,
valueField:'value', // 傳入後臺的值
textField:'text', // 前端展示的值
onChange:function(value) { // 監聽值改變時的方法
},
loadFilter:function(data) { // 數據過濾
var d = [];
for (var i = 1; i < data.length; i++){
if(){ // 頻道條件
d.push(date);
}
}
return d;
},
onLoadSuccess:function(){
var data = $('#id').combobox('getData');
$("#id").combobox('select',data[0].value); // 設置默認值
}
});
$("#id").combotree({ // 多選
method:'get',
url:'xxx',
editable:false,
checkbox:true,
multiple: true,
loadFilter:function(data) {
}
});
其他
// // 指定關閉對應的title頁面 此方法用於<iframe>定義父頁面
$.messager.confirm('確認',"msg",function(r){
if(r){
var jq = top.jQuery;
jq('#id').tabs('close',title);
}
});
// 定義日期
<input id="id" class="Wdate" onFocus="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})" style="position:relative;border:1px solid #D3D3D3;background-color:#fff;width:80px;vertical-align: middle;border-radius:5px;"/>
// 定義展示彈出窗口
<div id ="win_id"></div>
$("#id").click(function(){ // 觸發按鈕
$("#win_id").show().dialog({ // 展示窗口
title: 'title',// 彈出窗口的title
width: 700,
height:750,
closed: false,
cache: false,
modal: true,
left:400,
top:40,
onClose: function () {
// 關閉窗口 執行的操作
},
buttons: [{
text: 'ok',
iconCls: 'icon-ok',
handler: function () {
// 執行的操作
}
},...]
});
});
文件上傳
<imput id="fileButton" class="easyui-linkbutton" style="margin-left:10px;" iconCls='icon-add' name="文件上傳"/>
<input id="uploadFile" type="file" name="file" style="display:none" />
var files = []; // 用於存放上傳的文件信息
// 第1步
$("#filebutton").click(function(){
$("#uploadFile").click(); // 觸發添加文件 ，
});
// 注意；在上傳文件時，可能會觸發file的change的事件，上次第二次可能導致change觸發不了
// 第2步
$("#uploadFile").change(function(){
if (!validateFile("uploadFile")){ // 文件校驗
return ;
}
uploadFile();
});
function validateFile(id){ // 文件校驗
var fileObject=$("#"+id);
var filepath=fileObject.val();
var fileArr=filepath.split("//");
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split(".");
var filetype=fileTArr[fileTArr.length-1];
if(filetype!="xls"&&filetype!="txt"){ //指定校驗的文件 如：txt,xls..
fileObject.focus();
//BootstrapDialog.show({title:'操作提示',message:"文件格式不合法"});
$.messager.alert("操作提示","僅支持xxx文件上傳","warning");
var file = $("#"+id) ;
file.after(file.clone().val(""));
file.remove();
return false;
}else{
return true;
}
}
// 上傳文件 這個地方需要注意的是，需要引入js（ajaxfileupload.js， 網上應該有，我就暫不提供了） 該js中定義了ajaxFileUpload方法 ，這裏直接用
// 注: ajaxfileupload.js 版本沒有定義返回json數據的獲取（即返回的數據包含了標籤，直接拿不到）
// 因此我修改了下，新增了一個類型，可以獲取Json的數據 如下：
// 200行的地方新增了：------------
if ( type == "tojson" ){
//eval("data = \" "+data+" \" ");
data = jQuery.parseJSON(jQuery(data).text());
}
// ------------
function uploadFile(){
if (!validateFile("uploadFile")){
return ;
}
var timestamp = {time:new Date().getTime()};
var obj = document.getElementById("uploadFile");
var name = obj.files[0].name;
// ajaxfileupload.js 新增 type = "tojson" 特殊邏輯 接收 json串
$.ajaxFileUpload({
url:'xxx',
type:'post',
data: timestamp,
async:false,
secureuri: false, //是否需要安全協議，一般設置爲false
fileElementId: 'uploadFile', //文件上傳域的ID
dataType:'tojson',// json 獲取不到json的數據，新增的tojson的類型
success: function (data){ //服務器成功響應處理函數
// 根據返回的data,進行其他操作
resetUploadFile(); // 清除緩存，防止第二次上傳失效
...
}
},
error: function (data, status, e)//服務器響應失敗處理函數
{
$.messager.alert("warning","上傳失敗:"+e);
return false;
}
});
}
// 清除緩存
function resetUploadFile(){
var file = $("#uploadFile");
file.after(file.clone().val(""));
file.remove();
// 需要重新加載一次，去掉好像會有滴問題，暫沒查清原因。哪位大神指點下
$("#uploadFile").change(function(){
uploadFile();
});
}
如有描述有誤的地方，請各位大神指點.. 抱拳