<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