<script type="text/javascript">
$(function() {
// 页面加载后，对datagrid 进行设置
$("#grid").datagrid({
url: "datagrid_data.json",//发送数据加载请求到服务器
method: 'get',
fitColumns: false,//自动伸展或收缩列宽来保证表格正好充满屏幕
singleSelect: 'true',//true允许选择只有一行。
onClickCell: onClickCell,//单击单元格事件触发函数
onAfterEdit: onAfterEdit,//单击其它行触发事件函数
// 设置表格一些属性
columns: [
[ // 二维数组 支持 多级表头， 每一个数组 就是表头一行
{
field: "id", // 用于和服务器返回json中字段对应
title: "编号", // 列标题显示内容
width: 100,
formagrider: function(value, row, index) {
return index;
}
},
{
field: "name", // 用于和服务器返回json中字段对应
title: "商品名称", // 列标题显示内容
width: 100
},
{
field: "price", // 用于和服务器返回json中字段对应
title: "价格", // 列标题显示内容
width: 100
}, {
field: "time",
title: "时间",
width: 100,
editor: {
type: 'datebox',
options: {
//该单元格属性设置
}
}
}
]
],
//url: "product.json", // 加载json数据，显示表格数据
pagination: true, // 开启分页工具条
toolbar: [ // 一维数组，定义按钮
{
id: "saveBtn",
text: "保存",
iconCls: "icon-save",
handler: function() {
alert("保存...");
submitForm();
}
}
]
});
});
$.extend($.fn.datagrid.methods, {
//编辑单元格
editCell: function(jq, param) {
//console.log(jq);//datagrid绑定的对象 拥有表格所有的属性及函数[table#grid,context:document,selector:"#grid"]
//console.log(param);//选中的单元格对象{index: x,field:"xx"}
return jq.each(function() {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); //获取所有列
//遍历所有列，获取每一个列的值
for(var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
//console.log(col);
//console.log(fields[i]);//id,name,price,time
col.editor1 = col.editor;
console.info(col.editor1); //Object{type:"datebox",options:Object}
//console.info(col.editor);
//console.log(param.field);//
if(fields[i] != param.field) { //如果不是选中的单元格 editor置空
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index); //对指定索引单元格编辑
for(var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
//获取当前编辑状态
function endEditing() {
if(editIndex == undefined) { return true } //如果为undefined的话，为真，说明可以编辑
if($('#grid').datagrid('validateRow', editIndex)) {
$('#grid').datagrid('endEdit', editIndex); //判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
editIndex = undefined;
return true;
} else {
return false;
}
}
//单击单元格后执行
function onClickCell(index, field, value) {
if(endEditing()) { //如果编辑列返回undefined
/* $('#grid').datagrid('selectRow',index);选中当前单击单元格所在行 */
editIndex = index;
if(field == "time") {
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', { index: index, field: field });
//设置选中单元格默认显示时间值为当前日期值
var nowDate = new Date().toLocaleDateString();
$(ed.target).datebox('setValue',nowDate);
$(ed.target).focus();
}
editIndex = index;
}
/*$('#grid').datagrid({onClickRow:function(rowIndex,rowData){
//onClickCell也会触发onClickRow
}});*/
}
//结束一行操作后执行
function onAfterEdit(rowIndex, rowData, changes) {
console.log(changes);//测试是否产生变化值
var updated = $('#grid').datagrid('getChanges', 'updated');
if(updated.length < 0) {
editRow = undefined;
$('#grid').datagrid('unselectAll');
return;
} else {
submitForm(rowIndex, rowData, changes);
}
}
function submitForm(rowIndex, rowData, changes) {
//alert(changes.time);
$.ajax({
url:'',//表格数据提交路径
type: "POST",
dataType: 'json',
data:{"time":changes.time},
success: function(data) {
if(data.status=='OK') {
$('#grid').datagrid('load',
{
id:data.id,
name:data.name,
price:data.price,
time:data.time
}
);
} else {
alert(data.status);
}
}
});
}
</script>
</head>
<body>
<!--数据表格-->
<table id="grid">
</table>
</body>
EasyUi的DataGrid单元格编辑
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
判断easyui中datagrid有没有被加载
var length = $("#aa").datagrid().length; if(length == 0 ){ // 沒加載 }else{ // 加載了 };
EasyUI视频教程----权限系统开发
使用Struts2 + Hibernate 開發一套簡單的權限管理系統 視頻及代碼下載地址（百度網盤地址：） http://pan.baidu.com/s/1sjqRDy1
easyui datagrid的toolbar如何添加输入框或自定义控件
<script type="text/javascript"> $(function () { var lastIndex; $('#tt').datagrid({ toolbar