easyUI经验总结

1、tab打开后，再次点击左边菜单，tab不会刷新(猜测是由于tab的title相同引起)。

解决：

首先：tree中的onclick时间中添加addTab()方法

 layout_west_tree = $('#layout_west_tree').tree({             url : '${path }/resource/tree',             parentField : 'pid',             lines : true,             onClick : function(node) {                 var opts = {                     title : node.text,                     border : false,                     closable : true,                     fit : true,                     iconCls : node.iconCls                 };                 var url = node.attributes;                 if (url && url.indexOf("http") == -1) {                     url = '${path }' + url;                 }                 if (node.openMode == 'iframe') {                     opts.content = '<iframe src="' + url + '" frameborder="0" style="border:0;width:100%;height:99.5%;"></iframe>';                     addTab(opts);                 } else if (url) {                     opts.href = url;                     addTab(opts);                 }             }         });

其次，编写addTab()方法，先关闭该tab，再重新打开此tab

function addTab(opts) { var t = $('#index_tabs'); if (t.tabs('exists', opts.title)) { //t.tabs('select', opts.title); t.tabs('close',opts.title) t.tabs('add', opts); } else { t.tabs('add', opts); } }

存在问题：在有多个tab标签打开情况下，该tab显示的位置会移动到最后

2、easyUI combox 的onChange事件

<td><select id="typeCombo" class="easyui-combobox height 90" panelMinHeight="60px" name="typeCombo" style="width:90px"> <option value="0" selected>个人</option> <option value="1">一级部门</option> <option value="2">二级部门</option> </select></td> $("#typeCombo").combobox({ panelHeight:'40px', onChange: function (val) { mhSummaryDataGrid.datagrid('clearChecked');//清空上一页已选择的复选框 mhSummaryDataGrid.datagrid('options').queryParams = {};//清空上一页所带的参数 $("#nameTxt").textbox('setText', ""); switch(val){ case "0" : personalWorkHours(); break; case "1" : projectTeamWorkingHours(); break; case "2" : projectTeamTwoWorkingHours(); break; default : break; } } });

3、easyUI 动态column 

有一个需求，就是查出来的表的字段不唯一，一张表的字段可能是三个，也可能是五个，但是却要把它显示到页面

解决：通过array的push() 拼接出columns 属性的格式

function downloadManHours() { var selectedRows = mhSummaryDataGrid.datagrid('getChecked'); if (selectedRows.length == 0) { $.messager.alert('警告', '请至少选择一条记录！', 'error'); return; } var employeeNo = []; for (var i = 0; i < selectedRows.length; i++) {              employeeNo.push("employeeNo[]=" + selectedRows[i].employeeNo);         } window.open("manhoursummary/downloadExcel?" + employeeNo.join('&')); }

4、easyUI checkbox 不可多选，设置属性 singleSelect : false

5、easyUI datagrid mhSummaryDataGrid.datagrid('getChecked');或mhSummaryDataGrid.datagrid('getSelections');只能获取到第一行的数据

原因：idField写错

网上说改为使用getChecked，idField写错无影响。但经测试，无论使用geChecked还是getSelections在idField写错情况下均获取不到所有所选择行的数据

6、easyUI  清除combox的选中状态

$("#dgList").datagrid('clearSelections').datagrid('clearChecked');

7、easyUI queryParams用法

mhSummaryDataGrid.datagrid('options').queryParams用法

用法一：

$('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });

另一种用法：

var queryParams=$('#dg').datagrid('options').queryParam; queryParams.name = 'easyui'; queryParams.subject = 'datagrid'; $('#dg').datagrid('reload');

8、easyUI 传参到后台乱码

parent.$.modalDialog({ title : '员工'+name+'的工时明细', width : 800, height : 500, href : '${path }/manhoursummary/morePage?name=' + name });以这种方式拼接name（中文字符时）到后台基本都会乱码 解决：A、eclipse编译环境全部改为UTF-8;项目编码，web.xml里所有关于编码的全部设置为UTF-8 Window->perenference->General->Content Types

B、基本不要用中文传递如name，使用字段类型不为中文的id等

9、easyUI 验证表单

<td>工号</td> <td><input name="employeeNo" type="text" placeholder="" class="easyui-validatebox span2" data-options="required:true,validType:'checkNum'" value=""></td> $(function() { $.extend($.fn.validatebox.defaults.rules,{checkNum: { validator: function(value, param) { return /^([0-9]+)$/.test(value); }, message: '请输入数字' } });

10、在easyui的datagrid中，删除一条记录成功，重新加载datagrid后，还可以删除已经删除的id的相关记录

解决：应在删除数据成功后且重新加载datagrid前清空selections

personInfoDataGrid.datagrid('clearSelections');或personInfoDataGrid.datagrid('clearChecked');

function deleteInfo() { var selectedRows = personInfoDataGrid.datagrid("getSelections"); if (selectedRows.length == 0) { $.messager.alert('警告', '至少选择一条记录！', 'error'); return; } var id = []; for (var i = 0; i < selectedRows.length; i++) { id.push(selectedRows[i].id); } if (id.length != 0) { parent.$.messager.confirm('询问', '确认删除所选记录？', function(b) { if (b) { progressLoad(); $.post('${path }/personnelInformation/delete', { id : id }, function(result) { if (result.success) { parent.$.messager.alert('提示', result.msg, 'info'); personInfoDataGrid.datagrid('clearSelections'); personInfoDataGrid.datagrid('reload'); } progressClose(); }, 'JSON'); } }); } else { $.messager.alert('警告', '至少选择一条记录！', 'error'); personInfoDataGrid.datagrid('unselectAll').datagrid('uncheckAll'); } }

11，验证用户名等是否输入重复

<td><input type="text" id="userName" name="userName" class="easyui-validatebox" validType="userName[6,30]" required="true"/></td> JS $.extend($.fn.validatebox.defaults.rules, { 　　userName: { 　　　　　　　　validator: function(value,param){ 　　　　　　　　　　var data0 = false; 　　　　　　　　　　if(value.length >= param[0] && param[1] >= value.length) { 　　　　　　　　　　　　$.ajax({ 　　　　　　　　　　　　　　type: "POST",async:false, 　　　　　　　　　　　　　　url:'${pageContext.request.contextPath}/user/validate.do', 　　　　　　　　　　　　　　dataType:"json", 　　　　　　　　　　　　　　data:{"userName":value}, 　　　　　　　　　　　　　　async:false, 　　　　　　　　　　　　　　success: function(data){ 　　　　　　　　　　　　　　　　data0=data.valid; 　　　　　　　　　　　　　　} 　　　　　　　　　　　　}); 　　　　　　　　　　}else{ 　　　　　　　　　　　　param[2] = "请输入"+param[0]+"-"+param[1]+"位字符."; 　　　　　　　　　　　　return false; 　　　　　　　　　　} 　　　　　　　　　　param[2] = "用户名称已存在."; 　　　　　　　　　　return data0; 　　　　　　　　　　}, 　　　　　　　　　　message: "用户名称已存在." 　　　　　　　　} });