当前位置: 代码迷 >> 综合 >> easyUI经验总结
  详细解决方案

easyUI经验总结

热度:65   发布时间:2023-10-01 02:03:27.0

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: "用户名称已存在."}}); 


  相关解决方案