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>