easyui使用总结（二）

1.easyui datagrid跨行跨列表头，如下图所示

可以通过html方式和js方式定义，以下给出js方式。

$(document).ready(function() {$('#dg').datagrid({fit : true, // 完全填充，继承自父类pannel的属性nowrap : false, // 是否只显示一行，即文本过多是否省略部分striped : true, // 间隔条纹singleSelect : true, // 只能单选rownumbers : true, // 行号scrollbarSize : 0, // 去掉右侧滚动条列pagination : false, // 包含分页pageSize : 20, // 分页值showHeader : true,pageList : [ 20 ],// 可以设置每页记录条数的列表toolbar : '#tb',columns : [// 第一行[{field:'endNum',title:'已放款档案总笔数',width:110,align:'center',rowspan:2},//跨两行{title:'其中：',colspan:4},//跨四列{field:'dealingNum',title:'未放款档案总笔数',width:110,align:'center',rowspan:2},{title:'其中：',colspan:4},//跨四列{field:'loanAmountTotal_end',title:'已放款总金额(万)',width:110,align:'center',rowspan:2}],// 第二行第一部分[{field:'endNum1',title:'个人一手房',align:'center',rowspan:1},{field:'endNum2',title:'个人二手房',align:'center',rowspan:1},{field:'endNum3',title:'个人消费',align:'center',rowspan:1},{field:'endNum4',title:'个人经营',align:'center',rowspan : 1},// 第二行第二部分{field:'endNum1',title:'个人一手房',align:'center',rowspan:1},{field:'endNum2',title:'个人二手房',align:'center',rowspan:1},{field:'endNum3',title:'个人消费',align:'center',rowspan:1},{field:'endNum4',title:'个人经营',align:'center',rowspan : 1}]],url : './count/loadBranchFilesCount.do'});});

2.可改写保存的datagrid

var submitUrl;function submit() {$('#fm').form('submit', {url : submitUrl,onSubmit : function() {var isValid = $(this).form('validate');if (!isValid) {alert("无法提交数据，请按要求录入要素");} else {// 校验通过， 提交关闭，防止多次提交$('#submitBtn').linkbutton('disable');}return isValid; // 返回false终止表单提交},success : function(data) {$('#dlg').dialog('close');var jsObject = eval('(' + data + ')');//easyUI,将json转js object//alert(JSON.stringify(data));//alert("data.success:" + data.success);if (jsObject.success) {alert("提交成功");// 重新加载datagrid$('#dg').datagrid('reload');} else {alert("提交失败，出错原因: " + jsObject.msg);}}});}/** * 获得rowIndex * @param target * @returns */function getRowIndex(target){// 使用jquery选择器选择到row indexvar tr = $(target).closest('tr.datagrid-row');return parseInt(tr.attr('datagrid-row-index'));}/** * 将选中的行，启用编辑 * @param target */function editrow(target){$('#dg').datagrid('beginEdit', getRowIndex(target));}/** * 保存编辑 * @param target *///因为没有选择行，所以无法在onEndEdit使用getSelected获得行//需要在此处保存记录function saverow(target){var rowIndex = getRowIndex(target);$('#dg').datagrid('endEdit', rowIndex);var dataGridRows = $('#dg').datagrid('getRows');var selectRow = dataGridRows[rowIndex];var updateUrl = './para/updateFileDistPara.do?roleId=' + selectRow.roleId + "&flag=" + selectRow.flag;    $.getJSON(updateUrl, function(json) {    // 打印json    //console.log(JSON.stringify(json.res));    //alert(JSON.stringify(json));if (json.success) {// 从右下角slide弹窗$.messager.show({title : '提示',msg : '保存成功',timeout : 1500,showType : 'slide'});} else {$.messager.alert("提示", "保存失败，出错原因:" + json.msg);}    });}/** * 取消编辑 * @param target */function cancelrow(target){$('#dg').datagrid('cancelEdit', getRowIndex(target));}$(document).ready(function() {$('#dg').datagrid({fit : true,// 完全填充，继承自父类pannel的属性nowrap : false,// 是否只显示一行，即文本过多是否省略部分striped : true,// 间隔条纹singleSelect: true,// 只能单选rownumbers : true,// 行号scrollbarSize : 0,// 去掉右侧滚动条列idField:'roleId',    columns:[[        {field:'roleName',title:'角色名',width:100,align:'center'},        {field:'flag',title:'文件分发功能',width:100,align:'center'        ,formatter:function(value, row, index){switch (row.flag) {case "0":return "未指定";case "1":return "指定";default :return "数据异常";}},        // 进入编辑模式，才能启用editor        editor:{        type:'combobox',options:{valueField:'flag',textField:'flagName',editable:false,panelHeight:'auto',data:[{flag:'0', flagName:'未指定'},{flag:'1', flagName:'指定'}],required:true}        }},        {field:'action',title:'操作',width:80,align:'center',// 根据row.editing的值显示不同的操作formatter:function(value,row,index){// 第一次加载时，row.editing为undefinedif (row.editing){var s = '<a href="javascript:void(0)" onclick="saverow(this)">保存</a> ';var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">取消</a>';return s+c;} else {var e = '<a href="javascript:void(0)" onclick="editrow(this)">编辑</a> ';//var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';//return e+d;return e;}}}    ]],    url:'./para/loadFileDistPara.do',// 编辑之前事件，刷新row，使得row.editing为true，操作栏变成保存与取消onBeforeEdit:function(index,row){row.editing = true;$(this).datagrid('refreshRow', index);},// 编辑完成后，刷新row，使得row.editing为false，操作栏变成编辑onAfterEdit:function(index,row){row.editing = false;$(this).datagrid('refreshRow', index);},// 编辑取消后，刷新row，使得row.editing为false，操作栏变成编辑onCancelEdit:function(index,row){row.editing = false;$(this).datagrid('refreshRow', index);}});});

3.easyui validator扩展

下面代码直接保存为js，在html页面中引用该js文件即可

$.extend($.fn.validatebox.defaults.rules,{minLength : { // 判断最小长度validator : function(value, param) {return value.length >= param[0];},message : '最少输入 {0} 个字符。'},length : {validator : function(value, param) {var len = $.trim(value).length;return len >= param[0] && len <= param[1];},message : "内容长度介于{0}和{1}之间."},onlyLength : {validator : function(value, param) {var len = $.trim(value).length;return len == param[0];},message : "内容长度必须为{0}."},phone : {// 验证电话号码validator : function(value) {return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);},message : '格式不正确,请使用下面格式:028-86789101'},mobile : {// 验证手机号码validator : function(value) {return /^(13|15|18|17|14)\d{9}$/i.test(value);},message : '手机号码格式不正确(正确格式如：13550017681)'},phoneOrMobile : {// 验证手机或电话validator : function(value) {return /^(13|15|18|17|14)\d{9}$/i.test(value)|| /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);},message : '请填入手机或电话号码,如13550017681或028-86789101'},idcard : {// 验证身份证validator : function(value) {return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);},message : '身份证号码格式不正确'},floatOrInt : {// 验证是否为小数或整数validator : function(value) {return /^(\d{1,3}(,\d\d\d)*(\.\d{1,3}(,\d\d\d)*)?|\d+(\.\d+))?$/i.test(value);},message : '请输入数字，并保证格式正确'},currency : {// 验证货币validator : function(value) {return /^d{0,}(\.\d+)?$/i.test(value);},message : '货币格式不正确'},qq : {// 验证QQ,从10000开始validator : function(value) {return /^[1-9]\d{4,9}$/i.test(value);},message : 'QQ号码格式不正确(正确如：95557251)'},integer : {// 验证整数validator : function(value) {return /^[+]?[1-9]+\d*$/i.test(value);},message : '请输入整数'},chinese : {// 验证中文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value);},message : '请输入中文'},chnLength: {// 验证中文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value);},message : '请输入中文'},english : {// 验证英语validator : function(value) {return /^[A-Za-z]+$/i.test(value);},message : '请输入英文'},num : {// 纯数字validator : function(value) {return /^[0-9]+$/i.test(value);},message : '请输入纯数字'},unnormal : {// 验证是否包含空格和非法字符validator : function(value) {return /.+/i.test(value);},message : '输入值不能为空和包含其他非法字符'},username : {// 验证用户名validator : function(value) {return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);},message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'},faxno : {// 验证传真validator : function(value) {// return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[// ]){1,12})+$/i.test(value);return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);},message : '传真号码不正确'},zip : {// 验证邮政编码validator : function(value) {return /^[1-9]\d{5}$/i.test(value);},message : '邮政编码格式不正确'},ip : {// 验证IP地址validator : function(value) {return /d+.d+.d+.d+/i.test(value);},message : 'IP地址格式不正确'},name : {// 验证姓名，可以是中文或英文或数字validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value)| /^\w+[\w\s]+\w+$/i.test(value)| /^[0-9]+$/i.test(value);},message : '请输入姓名(中文或英文或数字)'},carNo : {validator : function(value) {return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);},message : '车牌号码无效（例：粤J12350）'},carenergin : {validator : function(value) {return /^[a-zA-Z0-9]{16}$/.test(value);},message : '发动机型号无效(例：FG6H012345654584)'},email : {validator : function(value) {return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);},message : '请输入有效的电子邮件账号(例：[e-mail])'},msn : {validator : function(value) {return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);},message : '请输入有效的msn账号(例：abc@hotnail(msn/live).com)'},department : {validator : function(value) {return /^[0-9]*$/.test(value);},message : '请输入部门排序号(例：1)'},same : {validator : function(value, param) {if ($("#" + param[0]).val() != "" && value != "") {return $("#" + param[0]).val() == value;} else {return false;}},message : '两次输入的密码不一致！'}});

easyui validator用法：

比如要验证IP地址，在上面js中validator的方法为function(value){}，该value就是值html中input框的值，所以html中校验ip的写法为：

<input name="ip" class="easyui-textbox" prompt="请输入IP" style="width:200px" data-options="validType:ip" />

对于minLength，验证方法为function(value, param)，其中value为前端页面input中的值，param是一个数组，可以使用param[0]，param[1]来引用，在这里只能引用param[0]，结果为8

<input name="num" class="easyui-textbox" prompt="请输入最小长度8的字符串" style="width:200px" data-options="minLength[8]" />

对于length，value为前端页面input中的值，param[0]为1，param[1]为10

<input name="length" class="easyui-textbox" prompt="请输入长度1-10之间的字符串" style="width:200px" data-options="length[1,10]" />

对于一次要校验多个条件的，可以写成(notSame是自定义的校验规则，上面代码没有)：

<input name="id" class="easyui-textbox" prompt="请输入档案编号" style="width:200px" data-options="validType:['num','minLength[1]','notSame[2]']" />