easyui datagrid学习笔记
datagrid行可编辑（部分行，部分列可编辑）。
1.下拉框选择身份证，在后面的证件号文本输入框需要验证证件号；否则不需要验证
//身份证类型改变，改变身份证号的 验证 $('#cardType_addDialog').combobox({ onChange:function(){ var idtype=$("#cardType_addDialog ").combobox('getValue'); if(idtype=='身份证'){ $('#idCode_addDialog').textbox({ required:true, validType:'IdCard', missingMessage:'请填写有效身份证号', invalidMessage:'请填写身份证号' }); }else{ $('#idCode_addDialog').textbox({ required:true, validType:'', missingMessage:'请填写相应证件号' }); } } });
2.下拉框加载数据
//加载下拉列表数据 comboxForSelectLoad : function(){ $('#cardType_search').combobox(cardTypeForSelect); }); idTypeForSelect.data.unshift({id:"驾照",text:"驾照"}); idTypeForSelect.data.unshift({id:"护照",text:"护照"}); idTypeForSelect.data.unshift({id:"港澳台胞证",text:"港澳台胞证"}); idTypeForSelect.data.unshift({id:"军官证",text:"军官证"}); idTypeForSelect.data.unshift({id:"身份证",text:"身份证"}); $('#cardType_search_addDialog').combobox(idTypeForSelect); },
3.列表
load_AuthoriseList : function(cardCode,authoirse_limit) { var idcode_count = 0; var phone_count = 0; $('#authorise_addDialog').datagrid({ loadMsg:"加载数据中，请稍后...", title:'授权人信息列表', url:'/mylife/mylife/queryAuthoriseByCardcode.do?cardCode=' +cardCode, nowrap: true, fitColumns:true, striped: true, border: true, remoteSort:false, idField:'dbid', singleSelect: true, pagination:true, rownumbers:true, view: myview, emptyMsg: ' ', onClickRow:function(index){ var authorises = $('#authorise_addDialog').datagrid('getData'); var custominfo = $('#customInfo_display').datagrid('getData'); for(var i =0;i<authorises.rows.length;i++){ //添加可以编辑的行 的条件 if(authorises.rows[i].dbid != '' && authorises.rows[i].cardCode==undefined ){ if (mylife.editIndex_authorise != index && index==i){ if (mylife.endEditing_Authorise()){ $('#authorise_addDialog').datagrid('selectRow', index).datagrid('beginEdit', index); mylife.editIndex_authorise = index; $('#authorise_addDialog').datagrid('unselectRow', mylife.editIndex_authorise); } else { $('#authorise_addDialog').datagrid('selectRow', mylife.editIndex_authorise); } } } } }, loadFilter:function(data){ $('#authorise_addDialog').datagrid('clearSelections'); var datas = {"total":0,"rows":[]}; if(data.succ){ datas.total = data.data[0].total; datas.rows = data.data[0].list; return datas; }else{ $.messager.alert('错误',data.msg,'error'); } return datas; }, //添加列 columns:[[ {field:"dbid",title:"dbid",hidden:true}, {field:"cardRelCusDbid",title:"cardRelCusDbid",hidden:true}, {field:"cardCode",title:"cardCode",hidden:true}, {field:"authoriseCardName",title:"姓名",width:"8%",align:'center' }, {field:"authoriseCardPhon",title:"客人电话",width:"12%",align:'center', editor: { type: 'validatebox', options: { required: true,validType:'Mobile', onBlur:function(newValue, oldValue){ var customName = $('#authorise_addDialog').datagrid('getSelections')[0].authoriseCardName; var deptName = $('#authorise_addDialog').datagrid('getSelections')[0].deptName; CRM.loadJson("/mylife/queryInfoWetherExist.do", "customName="+customName+"&customPhone="+newValue+"&idCode="+''+"&idType="+'', function(data) { if(data.length>0 && phone_count!=0){ $.messager.alert('温馨提示','该客户姓名和证件号已存在'); }else{ alert("事件已触发"); } phone_count++; }); } } } }, {field:"idCode",title:"身份证号码",width:"15%",align:'center',editor: { type: 'validatebox', options: {required: true,validType:'RegIdCard', onBlur:function(newValue, oldValue){ var customName = $('#authorise_addDialog').datagrid('getSelections')[0].authoriseCardName; var idType = $('#authorise_addDialog').datagrid('getSelections')[0].idType; var cardCode = $('#authorise_addDialog').datagrid('getSelections')[0].cardCode; CRM.loadJson("", "customName="+customName+"&idCode="+newValue+"&idType="+idType+"&customPhone="+'', function(data) { if(data.length>0 && idcode_count!=0){ $.messager.alert('温馨提示','该客户姓名和证件号已存在'); } idcode_count++; }); } } }}, {field:"othersIdType",title:"其他证件类型",width:"10%",align:'center'}, {field:"othersIdCode",title:"其他证件号码",width:"15%",align:'center'}, {field:"insertUserName",title:"维护人员",width:"8%",align:'center'}, {field:"deptName",title:"部门",width:"9%",align:'center'}, {field:"insertDate",title:"维护时间",width:"14%",align:'center',formatter:formatDatebox}, {field:"operation",title:"操作",width:"8%",align:'center', formatter : function(value, row, index) { var str = ""; var cardStatus=undefined; if($('#cardInfoList_addDialog').datagrid('getData').total!=0){ cardStatus = $('#cardInfoList_addDialog').datagrid('getData').rows[0].accStatus; } var authorises = $('#authorise_addDialog').datagrid('getData');//带出来的数据 var cardCode=$('#authorise_addDialog').datagrid('getData').rows[index].cardCode; if(cardCode!=undefined){ if(cardStatus=='CS002'){// 正常 才可以对之前数据进行删除 if(authoirse_limit=='多次添加不可修改'){//多次添加不可修改 str += ' <a class="editcls" id="delete_authorise'+index+'" href="javascript:void(0)"></a>'; }else{ str += ' <a class="editcls" id="delete_authorise'+index+'" onclick="mylife.deleteAuthor_addDialog(\''+index+'\');" href="javascript:void(0)">删除</a>'; } }else{ str += ' <a class="editcls" id="delete_authorise'+index+'" href="javascript:void(0)"></a>'; } }else{//新增 str += ' <a class="editcls" id="delete_authorise'+index+'" onclick="mylife.deleteAuthor_addDialog(\''+index+'\');" href="javascript:void(0)">删除</a>'; } return str; } } ]], onLoadSuccess:function(data){ } , }); //设置分页控件 var p = $('#authorise_addDialog').datagrid('getPager'); $(p).pagination({ pageSize: 4, showPageList:false, beforePageText: '', afterPageText: '', displayMsg: '', layout:[] }); },
4.追加一行
$('#authorise_addDialog').datagrid('appendRow',
{
dbid:dbid,
authoriseName:customName,
authorisePhon:customPhone,
idCode:idCode,
othersIdType:othersIdType,
othersIdCode:othersIdCode
});
5.设置超链接不可用
var a_authorise='maintain_authorise'+index; $('#'+a_authorise).linkbutton({disabled:true});
6.重写editing方法
endEditing_authorise : function () { if (mylife.editIndex_authorise == undefined){return true} if ($('#authorise_addDialog').datagrid('validateRow', mylife.editIndex_authorise)){ $('#authorise_addDialog').datagrid('endEdit', mylife.editIndex_authorise); mylife.editIndex_authorise = undefined; return true; } else { return false; } },
7.常用使用方法
设置值 $("#detailDialog").textbox('setValue',''); 获取当前选择行的指定列的值 $("#dg").datagrid('getSelections')[0].列名; 某行验证通过 返回Boolean值 $('#addDialog').datagrid('validateRow', index) 设置提示上的值 $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.confirm('温馨提示', '您确定删除信息？', function(r){} 删除一行，index是行号 $('#addDialog').datagrid('deleteRow', index); 移除编辑器,phone是对应列名 $('#addDialog').datagrid('removeEditor', 'phone'); 获取下拉框中的值 $("#addDialog").combobox('getValue');
