datagrid的行编辑
datagrid为我们提供了行录入(编辑)功能；
--实现这个表格的行录入，基于datagrid的列的属性:editor
之前必须要开启datagrid的方法对行开启编辑:handler:$().datagrid('bginEdit',0) ,
保存 在保存按钮哪里:handler:$().datagrid('endEdit',0),
取消编辑的话也要在取消按钮哪里::handler:$().datagrid('cancleEdit',0)
editor{
type:'validatebox',
options: {
required: true
}
}
-如何在表格中插入新的一行:
appendRow()-插入到表格的最后位置
--行编辑事件：
beginEdit--onBeforeEdit(),endEdit--onAfterEdit()(只有保存成功后才能出发),cancleEdit--onCacleEdit()
-----------------------------------------------代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运单快速录入</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var editIndex ;
function doAdd(){
if(editIndex != undefined){
$("#grid").datagrid('endEdit',editIndex);
}
if(editIndex==undefined){
//alert("快速添加电子单...");
$("#grid").datagrid('insertRow',{
index : 0,
row : {}
});
$("#grid").datagrid('beginEdit',0);
editIndex = 0;
}
}
function doSave(){
$("#grid").datagrid('endEdit',editIndex );
}
function doCancel(){
if(editIndex!=undefined){
$("#grid").datagrid('cancelEdit',editIndex);
if($('#grid').datagrid('getRows')[editIndex].id == undefined){
$("#grid").datagrid('deleteRow',editIndex);
}
editIndex = undefined;
}
}
//工具栏
var toolbar = [ {
id : 'button-add',
text : '新增一行',
iconCls : 'icon-edit',
handler : doAdd
}, {
id : 'button-cancel',
text : '取消编辑',
iconCls : 'icon-cancel',
handler : doCancel
}, {
id : 'button-save',
text : '保存',
iconCls : 'icon-save',
handler : doSave
}];
// 定义列
var columns = [ [ {
field : 'id',
title : '工作单号',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'arrivecity',
title : '到达地',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
},{
field : 'product',
title : '产品',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'num',
title : '件数',
width : 120,
align : 'center',
editor :{
type : 'numberbox',
options : {
required: true
}
}
}, {
field : 'weight',
title : '重量',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'floadreqr',
title : '配载要求',
width : 220,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}] ];
$(function(){
// 先将body隐藏，再显示，不会出现页面刷新效果
$("body").css({visibility:"visible"});
// 运单数据表格
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true,
border : true,
rownumbers : true,
striped : true,
pageList: [30,50,100],
pagination : true,
toolbar : toolbar,
url : "",
idField : 'id',
columns : columns,
onDblClickRow : doDblClickRow,
onAfterEdit : function(rowIndex, rowData, changes){
console.info(rowData);
editIndex = undefined;
}
});
});
function doDblClickRow(rowIndex, rowData){
alert("双击表格数据...");
console.info(rowIndex);
$('#grid').datagrid('beginEdit',rowIndex);
editIndex = rowIndex;
}
</script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
<table id="grid"></table>
</div>
</body>
</html>
