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

});

猜你喜欢