jquery easyui-datagrid手动增加删除重置行
1.实现的效果图如下
2.界面:
<div region="center">
<table id="tt">
</table>
</div>
3.引入的js文件
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/icon.css" />
<script type="text/javascript" src="http://www.cnblogs.com/script/jquery-1.4.2.min.js" </script>
<script type="text/javascript" src="http://www.cnblogs.com/script/jquery.easyui.min.js" </script>
<script type="text/javascript" src="http://www.cnblogs.com/script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script>
4.实现的js代码:
<script type="text/javascript"> var id; $(document).ready(function () { //初始化所在城区 var dialogParams = window.dialogArguments; var obj = dialogParams[0]; var xmaqryPartJson = obj[‘xmaqryPartJson‘]; $("[id^=gfzrzt_]").each(function(){ document.getElementById($(this).attr("id")).value = obj[$(this).attr("id").replace("gfzrzt_","")] }) id = obj[‘id‘]; initData(xmaqryPartJson) }); function initData(xmaqJson) { if (xmaqJson == ‘‘ || xmaqJson == undefined || xmaqJson == null) { showTable(new Array()); } else { var data = $.parseJSON(xmaqJson); showTable(data); } } var lastIndex = undefined; function showTable(xmaqJson) { $("#tt").datagrid({ idField: "id", fitColumns: false, title: "项目专职安全生产管理人员", singleSelect: true, frozenColumns: [[ { field: ‘id‘, checkbox: true } ]], columns: [ [ {field: ‘zrztid‘, align: "center", width: 0}, {field: ‘gcid‘,hidden: true, align: "center", width: 0}, {field: ‘gccode‘, align: "center", width: 0}, {field: ‘zzid‘,hidden: true, align: "center", width: 0}, {field: ‘zzsj‘, align: "center", width: 0}, {field: ‘xm‘, title: ‘姓名‘, width: 130, sortable: true, align: ‘center‘,required:true, editor: {type:‘text‘}}, {field: ‘aqsckhzh‘, title: ‘安全生产考核证号‘, width: 150, sortable: true, align: ‘center‘, editor: ‘text‘}, {field: ‘lxdh‘, title: ‘联系电话‘, width: 100, sortable: true, align: ‘center‘, editor: ‘text‘} ] ], toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () { if (endEditing()){ $(‘#tt‘).datagrid(‘appendRow‘,{row: { id:‘‘,zrztid:id,gcid:‘‘, gccode: ‘‘, zzid: ‘‘, zzsj: ‘‘, xm:‘‘, aqsckhzh: ‘‘, lxdh:‘‘ }}); if($(‘#tt‘).datagrid(‘getRows‘) != undefined){ lastIndex = $(‘#tt‘).datagrid(‘getRows‘).length-1; } $(‘#tt‘).datagrid(‘selectRow‘, lastIndex) .datagrid(‘beginEdit‘, lastIndex) } } }, ‘-‘, { text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () { var row = $(‘#tt‘).datagrid(‘getSelected‘); if (row) { var index = $(‘#tt‘).datagrid(‘getRowIndex‘, row); $(‘#tt‘).datagrid(‘cancelEdit‘, index).datagrid(‘deleteRow‘, index); lastIndex = undefined; } } } // ,‘-‘, { // text: ‘保存‘, // iconCls: ‘icon-save‘, // handler: function () { // if (endEditing()){ // $(‘#tt‘).datagrid(‘acceptChanges‘); // } // } // } , ‘-‘, { text: ‘重置‘, iconCls: ‘icon-undo‘, handler: function () { $(‘#tt‘).datagrid(‘rejectChanges‘); lastIndex = undefined; } }] , onClickRow: function (index){ if (lastIndex != index){ if (endEditing()){ $(‘#tt‘).datagrid(‘selectRow‘, index) .datagrid(‘beginEdit‘, index); lastIndex = index; } else { $(‘#tt‘).datagrid(‘selectRow‘, lastIndex); } } } }); $("#tt").datagrid("loadData", xmaqJson); } function endEditing(){ if (lastIndex == undefined){return true} if ($(‘#tt‘).datagrid(‘validateRow‘, lastIndex)){ var ed = $(‘#tt‘).datagrid(‘getEditor‘, {index:lastIndex,field:‘xm‘}); var xm = $(ed.target).val(); var ed1 = $(‘#tt‘).datagrid(‘getEditor‘, {index:lastIndex,field:‘aqsckhzh‘}); var aqsckhzh = $(ed1.target).val(); if(xm != ‘‘ && xm != undefined && aqsckhzh !=‘‘ && aqsckhzh != undefined){ $(‘#tt‘).datagrid(‘endEdit‘, lastIndex); lastIndex = undefined; return true; }else{ alert("项目专职安全生产管理人员第"+(lastIndex+1)+"行【姓名】和【安全生产考核】必须填写"); return false; } } else { return false; } } </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。