本文介绍easyui的datagrid如何使用编辑器的功能并且完成自定义的校验
1、定义dategrid列表,这里editor主要是设置该字段可以编辑,并且指定自定义编辑类型
editor="{type:'Wdate',options:{required:true}}"
<e:datagrid url=''
id="order_detail_data_grid" pagination="true" style="height: 400px" pageSize="15" rownumbers="true" toolbar="#order_detail_button" singleSelect="false">
<thead frozen="true">
<tr>
<th field="ckdelete" width="10%" align="center" checkbox="true" halign="center"></th>
<th field="month_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'Wdate',options:{required:true}}">账期</th>
<th field="prvnce_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">省分</th>
<th field="model_attribution" width="10%" align="left" halign="center" resizable="true" formatter="orderdetail_final_modelFormatter" editor="{type:'combobox', options:{required:true,validType:'isBlankCombobox',url:'<e:url value="/pages/audit/reportOrder/order_result_action.jsp?eaction=model_attr_code"></e:url> ',valueField:'value', textField:'text' }}">模型类型</th><!---->
</tr>
</thead>
<thead>
<tr>
<th field="model_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">模型</th>
<th field="dispatch_id" width="10%" align="left" halign="center" resizable="true" editor="{type:'dispatchid'}">编号</th>
<th field="dispatch_nm" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">名称</th>
<th field="dispatch_substance" width="10%" align="left" halign="center" resizable="true" editor="{type:'textValue',options:{required:true}}">描述</th>
<th field="dispatch_time" width="10%" align="left" halign="center" resizable="true" editor="{type:'WdateDate',options:{required:true}}">abx</th>
<th field="issue_num" width="10%" align="left" halign="center" resizable="true" editor="{type:'numberbox',options:{required:true,min:0,precision:0,validType:['length[1,12]']}}">记录数</th>
<th field="issue_sum" width="20%" align="left" halign="center" editor="{type:'textDecimal',options:{required:true,validType:['isBlank','intOrFloat','length[1,16]']}}">金额</th>
<th field="extend_latn_num" width="15%" align="left" halign="center" resizable="true" formatter="orderdetail_final_extand_latn_num" editor="{type:'combobox', options:{required:true,validType:'isBlankCombobox',url:'<e:url value="/pages/audit/reportOrder/order_result_action.jsp?eaction=model_extand_latn_num"></e:url> ',valueField:'value', textField:'text' }}">核查</th>
<th field="dispatch_state" width="10%" align="left" halign="center" resizable="true" formatter="orderDetail_final_dispatch_state" editor="{type:'combobox', options:{onSelect:order_detail_dispatch_state_change,required:true,validType:'isBlankCombobox',url:'',valueField:'value', textField:'text' }}">状态</th>
<th field="dispatch_state_time" width="10%" align="left" halign="center" resizable="true" editor="{type:'WdateDate',options:{required:true}}">变更时间</th>
<th field="verify_num" width="10%" align="left" halign="center" resizable="true" editor="{type:'validatebox',options:{required:true,validType:['intOrFloat','length[1,12]']}}">记录数(条)</th>
<th field="verify_risk_sum" width="12%" align="left" halign="center" resizable="true" editor="{type:'validatebox',options:{required:true,validType:['intOrFloat','length[1,12]']}}">风险金额(分)</th>
<th field="risk_verify_sum" width="10%" align="left" halign="center" resizable="true" editor="{type:'textDecimal',options:{required:true,validType:['isBlank','intOrFloat','length[1,16]']}}">金额</th>
<th field="ck" width="10%" align="left" halign="center" resizable="true" formatter="problemSure_final_ck">操作</th>
</tr>
</thead>
</e:datagrid>
2、自定义编辑类型设置
这里的editors有五种重写的方法,这里init在定义好input框之后,要做一个input.validatebox(options)操作,否则不产生自动
方法 |
参数 | 描述 |
init | container, options | 初始化编辑器并返回目标对象。 |
destroy | target | 如果有必要销毁编辑器。 |
getValue | target | 从编辑器中获取值。 |
setValue | target , value | 向编辑器中写入值。 |
resize | target , width | 如果有必要调整编辑器的大小。 |
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
init: function(container, options){
var input = $('<input type="text">').appendTo(container);
return input.numberspinner(options);
},
destroy: function(target){
$(target).numberspinner('destroy');
},
getValue: function(target){
return $(target).numberspinner('getValue');
},
setValue: function(target, value){
$(target).numberspinner('setValue',value);
},
resize: function(target, width){
$(target).numberspinner('resize',width);
}
},
Wdate:{
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input easyui-validatebox" onclick=\'WdatePicker({dateFmt:"yyyyMM",readOnly:true})\'>').appendTo(container);
return input.validatebox(options);
},
getValue: function(target){
return $(target).val()
},
setValue: function(target, value){
$(target).val(value)
}
},
WdateDate:{
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input easyui-validatebox" onclick=\'WdatePicker({dateFmt:"yyyy-MM-dd HH:mm:ss ",readOnly:true})\'>').appendTo(container);
return input.validatebox(options);
},
getValue: function(target){
return $(target).val()
},
setValue: function(target, value){
$(target).val(value)
}
},
textValue:{
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input easyui-validatebox" >').appendTo(container);
return input.validatebox(options);
},
getValue: function(target){
return $(target).val()
},
setValue: function(target, value){
$(target).val(value)
}
},
textDecimal:{
init: function(container, options){
var input = $('<input type="text" >').appendTo(container);
return input.validatebox(options);
},
getValue: function(target){
return $(target).val()
},
setValue: function(target, value){
if(value!=null&value!=""){
$(target).val(value)
}else {
$(target).val(0)
}
}
},
dispatchid:{
init: function(container, options){
var input = $('<input type="text" >').appendTo(container);
return input;
},
getValue: function(target){
return $(target).val()
},
setValue: function(target, value){
if(value!=null&&value!=""){//editor赋值的时候判断,如果有值,就直接赋值,如果没有值,那就去接口查询,然后取到的值赋值给input框
$(target).val(value)
}else {
$.post("<e:url value="getDispatch_id.e"></e:url>",null, function(rsp) {
if(rsp.dispatchId){
$(target).val(rsp.dispatchId)
}
}, "JSON").error(function() {
});
}
}
}
});
3、datagrid 定义,需要完成如下功能
功能点 | 方法 |
单击一行时,改变此行的编辑状态,改为input框 | |
分页之前,提示用户,此页面还有未被保存的东西 | onBeforeLoad_order_detail |
$('#order_detail_data_grid').datagrid({
onClickRow: onClickRow_order_detail,
onBeforeLoad:onBeforeLoad_order_detail
});
3.1 首先看第一个,onClickRow_order_detail
var editIndex = undefined;
function endEditing_order_detail(){
if (editIndex == undefined){return true}
//alert($('#order_detail_data_grid').datagrid('validateRow', editIndex))
//校验此行数据是否合乎规范
if ($('#order_detail_data_grid').datagrid('validateRow', editIndex)){
$('#order_detail_data_grid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
$.messager.alert('提示','请您填写完整本行数据','info',function (){
return false;
})
}
}
//点击事件 点击一行时,编辑一行
function onClickRow_order_detail(index){
if (editIndex != index){
if (endEditing_order_detail()){
$('#order_detail_data_grid').datagrid('selectRow', index).datagrid('beginEdit', index);
editIndex = index;
} else {
$('#order_detail_data_grid').datagrid('selectRow', editIndex);
}
}
}
//添加一行
function append_order_detail() {
if (endEditing_order_detail()) {
$('#order_detail_data_grid').datagrid('appendRow', { });
editIndex = $('#order_detail_data_grid').datagrid('getRows').length - 1;
$('#order_detail_data_grid').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
//批量删除
function delete_order_detail() {
var selectObj=$("#order_detail_data_grid").datagrid("getSelections");
if(selectObj.length==0){
$.messager.alert("提示","请选择需要删除的数据。");
return;
}
$.messager.confirm('确认框', '您确定要删除这些数据吗?', function(r) {
if(r){
var ids="";
for(var x=0;x<selectObj.length;x++){
var data=selectObj[x];
var deleteIndex=$('#order_detail_data_grid').datagrid('getRowIndex',data);
$('#order_detail_data_grid').datagrid('cancelEdit', deleteIndex)
.datagrid('deleteRow', deleteIndex);
}
}
});
}
//暂存
function accept_order_detail(){
if (endEditing_order_detail()){
$.messager.progress();
var rows = $('#order_detail_data_grid').datagrid('getChanges');
var $dg=$('#order_detail_data_grid');
if ($dg.datagrid('getChanges').length) {
var updated = $dg.datagrid('getChanges', "updated");
var inserted = $dg.datagrid('getChanges', "inserted");
var deleted = $dg.datagrid('getChanges', "deleted");
var effectRow = new Object();
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
if(inserted.length){
effectRow["inserted"] = JSON.stringify(inserted);
}
if(deleted.length){
effectRow["deleted"] = JSON.stringify(deleted);
}
effectRow['report_month']='${param.report_month}'
effectRow['user_id']='${sessionScope.UserInfo.DATA_USER_ID}'
effectRow['user_name']='${sessionScope.UserInfo.USER_NAME}'
//$.messager.progress('close');
$.post("<e:url value="zancunOrderDetail1.e"></e:url>",effectRow, function(rsp) {
if(rsp.status){
$.messager.progress('close');
$.messager.alert("提示", "暂存本页成功!");
editIndex = undefined;
$dg.datagrid('acceptChanges');
}
}, "JSON").error(function() {
$.messager.progress('close');
$.messager.alert("提示", "暂存本页错误了!");
});
//$dg.datagrid('acceptChanges');
}else {
$.messager.progress('close');
$.messager.alert("提示", "暂存本页成功!");
$dg.datagrid('acceptChanges');
}
}
}
3.2 在分页之前提示,有未保存数据
function confirm_is_next_page_order_detail(pager,page){
var msg="您尚未暂存本页数据,此操作会放弃本页修改,是否继续?";
if (confirm(msg)==true){
editIndex = undefined
return true;
}else {
$(pager).pagination('refresh',{ // 改变选项并刷新分页栏信息
pageNumber: page-1
});
return false;
}
}
function onBeforeLoad_order_detail(param){
var $dg = $(this);
var page =param.page
//var rows=param.rows;
var pager = $dg.datagrid('getPager');
if($dg.datagrid('getChanges').length) {
return confirm_is_next_page_order_detail(pager,page)
}else {
editIndex = undefined
$dg.datagrid('acceptChanges');
}
}
4.根据某个字段,处理这个字段相关联字段的校验,赋值
function deal_rep_change_situation_change(record){
var value=record.value;
//var text=record.text;
var $dg=$("#deal_rep_data_grid")
var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")//获取当前编辑行的行号
var editor_unchange_reason=$dg.datagrid('getEditor', {index:index,field:'unchange_reason'});//获取改字段的editor参数
var tagrget=editor_unchange_reason.target;
if(value=='10'){
tagrget.validatebox({required:false})//改变该字段的validate参数
}else {
tagrget.validatebox({required:true})
}
}
function deal_rep_change_situation_load(){
var value=$(this).combobox('getValue');
var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")
var $dg=$("#deal_rep_data_grid")
var editor_unchange_reason=$dg.datagrid('getEditor', {index:index,field:'unchange_reason'});
var tagrget=editor_unchange_reason.target;
if(value=='10'){
tagrget.validatebox({required:false})
}else {
tagrget.validatebox({required:true})
}
}
function order_detail_dispatch_state_change(record){
var value=record.value;
var $dg=$("#order_detail_data_grid")
var index =$(this).parents("tr.datagrid-row").attr("datagrid-row-index")
var editor_verify_num=$dg.datagrid('getEditor', {index:index,field:'verify_num'});
var editor_verify_risk_sum=$dg.datagrid('getEditor', {index:index,field:'verify_risk_sum'});
var editor_risk_verify_sum=$dg.datagrid('getEditor', {index:index,field:'risk_verify_sum'});
var editor_verify_num_target=editor_verify_num.target;
var editor_verify_risk_sum_target=editor_verify_risk_sum.target;
var editor_risk_verify_sum_target=editor_risk_verify_sum.target;
if(value=='10'){
$(editor_verify_num_target).val(0)//赋值
$(editor_verify_risk_sum_target).val(0)
$(editor_risk_verify_sum_target).val(0)
}else if (value=='20'){
$(editor_risk_verify_sum_target).val(0)
}
}
4.1 自定义校验方法
$.extend($.fn.validatebox.defaults.rules, {
isBlank: {
validator: function (value, param) {
return $.trim(value) != ''
},
message: '不能为空,全空格也不行'
},
isBlankCombobox: {
validator: function (value, param) {
return $.trim(value) != '请选择'
},
message: '请选择选框内容'
},
checkFloat: {
validator: function(value, param) {
return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
},
message: '请输入合法数字'
},
intOrFloat: {// 验证整数或小数
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '请输入数字,并确保格式正确'
},
integer: {// 验证整数 可正负数
validator: function (value) {
//return /^[+]?[1-9]+\d*$/i.test(value);
return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
},
message: '请输入整数'
},
});
致此,所有功能实现,本人微信号zcy2366585970,欢迎大家提问