jQuery EasyUI 數(shù)據(jù)網(wǎng)格 – 啟用行內(nèi)編輯

jQuery EasyUI 數(shù)據(jù)網(wǎng)格 - 啟用行內(nèi)編輯

jQuery EasyUI數(shù)據(jù)網(wǎng)格（datagrid）的可編輯功能允許用戶向數(shù)據(jù)網(wǎng)格（datagrid）添加一個(gè)新行，用戶也可以更新一個(gè)或多個(gè)行。

本節(jié)的實(shí)例向您展示如何創(chuàng)建一個(gè)數(shù)據(jù)網(wǎng)格（datagrid）和內(nèi)聯(lián)編輯器。

創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）

$(function () {
        $('#tt').datagrid({
            title: 'Editable DataGrid',
            iconCls: 'icon-edit',
            width: 660,
            height: 250,
            singleSelect: true,
            idField: 'itemid',
            url: 'datagrid_data.json',
            columns: [[
                { field: 'itemid', title: 'Item ID', width: 60 },
                {
                    field: 'productid', title: 'Product', width: 100,
                    formatter: function (value) {
                        for (var i = 0; i < products.length; i++) {
                            if (products[i].productid == value) return products[i].name;
                        }
                        return value;
                    },
                    editor: {
                        type: 'combobox',
                        options: {
                            valueField: 'productid',
                            textField: 'name',
                            data: products,
                            required: true
                        }
                    }
                },
                { field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
                { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' }, { field: 'attr1', title: 'Attribute', width: 150, editor: 'text' },
                {
                    field: 'status', title: 'Status', width: 50, align: 'center',
                    editor: {
                        type: 'checkbox',
                        options: {
                            on: 'P',
                            off: ''
                        }
                    }
                },
                {
                    field: 'action', title: 'Action', width: 70, align: 'center',
                    formatter: function (value, row, index) {
                        if (row.editing) {
                            var s = '<a href="#" onclick="saverow(this)">Save</a> ';
                            var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
                            return s + c;
                        } else {
                            var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
                            var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
                            return e + d;
                        }
                    }
                }
            ]],
            onBeforeEdit: function (index, row) {
                row.editing = true;
                updateActions(index);
            },
            onAfterEdit: function (index, row) {
                row.editing = false;
                updateActions(index);
            },
            onCancelEdit: function (index, row) {
                row.editing = false;
                updateActions(index);
            }
        });
    });
    function updateActions(index) {
        $('#tt').datagrid('updateRow', {
            index: index,
            row: {}
        });
    }

為了啟用數(shù)據(jù)網(wǎng)格行內(nèi)編輯，您應(yīng)該添加一個(gè)editor屬性到列中。編輯器（editor）會(huì)告訴數(shù)據(jù)網(wǎng)格（datagrid）如何編輯字段及如何保存字段值。正如您所看到的，我們定義的三個(gè)編輯器（editor）：text、combobox 和 checkbox。

	function getRowIndex(target){
		var tr = $(target).closest('tr.datagrid-row');
		return parseInt(tr.attr('datagrid-row-index'));
	}
	function editrow(target){
		$('#tt').datagrid('beginEdit', getRowIndex(target));
	}
	function deleterow(target){
		$.messager.confirm('Confirm','Are you sure?',function(r){
			if (r){
				$('#tt').datagrid('deleteRow', getRowIndex(target));
			}
		});
	}
	function saverow(target){
		$('#tt').datagrid('endEdit', getRowIndex(target));
	}
	function cancelrow(target){
		$('#tt').datagrid('cancelEdit', getRowIndex(target));
	}

下載 jQuery EasyUI 實(shí)例

jeasyui-datagrid-datagrid12.zip