55面试教程网 jQuery EasyUI 技术教程
jQuery EasyUI 技术教程
jQuery EasyUI 教程jQuery EasyUI 简介jQuery EasyUI 应用 – 创建 CRUD 应用jQuery EasyUI 应用 – 创建 CRUD 数据网格jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用jQuery EasyUI 应用 – 创建 RSS Feed 阅读器jQuery EasyUI 拖放 – 基本的拖动和放置jQuery EasyUI 拖放 – 创建拖放的购物车jQuery EasyUI 拖放 – 创建学校课程表jQuery EasyUI 菜单与按钮 – 创建简单的菜单jQuery EasyUI 菜单与按钮 – 创建链接按钮jQuery EasyUI 菜单与按钮 – 创建菜单按钮jQuery EasyUI 菜单与按钮 – 创建分割按钮jQuery EasyUI 布局 – 为网页创建边框布局jQuery EasyUI 布局 – 在面板中创建复杂布局jQuery EasyUI 布局 – 创建折叠面板jQuery EasyUI 布局 – 创建标签页(Tabs)jQuery EasyUI 布局 – 动态添加标签页(Tabs)jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)jQuery EasyUI 布局 – 创建 XP 风格左侧面板jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格jQuery EasyUI 数据网格 – 取得选中行数据jQuery EasyUI 数据网格 – 添加查询功能jQuery EasyUI 数据网格 – 添加工具栏jQuery EasyUI 数据网格 – 创建复杂工具栏jQuery EasyUI 数据网格 – 设置冻结列jQuery EasyUI 数据网格 – 动态改变列jQuery EasyUI 数据网格 – 格式化列jQuery EasyUI 数据网格 – 设置排序jQuery EasyUI 数据网格 – 自定义排序jQuery EasyUI 数据网格 – 创建列组合jQuery EasyUI 数据网格 – 添加复选框jQuery EasyUI 数据网格 – 自定义分页jQuery EasyUI 数据网格 – 启用行内编辑jQuery EasyUI 数据网格 – 扩展编辑器jQuery EasyUI 数据网格 – 列运算jQuery EasyUI 数据网格 – 合并单元格jQuery EasyUI 数据网格 – 创建自定义视图jQuery EasyUI 数据网格 – 创建页脚摘要jQuery EasyUI 数据网格 – 条件设置行背景颜色jQuery EasyUI 数据网格 – 创建属性网格jQuery EasyUI 数据网格 – 扩展行显示细节jQuery EasyUI 数据网格 – 创建子网格jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据jQuery EasyUI 数据网格 – 添加分页组件jQuery EasyUI 窗口 – 自定义窗口工具栏jQuery EasyUI 窗口 – 窗口与布局jQuery EasyUI 窗口 – 创建对话框jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框jQuery EasyUI 树形菜单 – 使用标记创建树形菜单jQuery EasyUI 树形菜单 – 创建异步树形菜单jQuery EasyUI 树形菜单 – 树形菜单添加节点jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单jQuery EasyUI 树形菜单 – 树形菜单拖放控制jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点jQuery EasyUI 树形菜单 – 创建基础树形网格jQuery EasyUI 树形菜单 – 创建复杂树形网格jQuery EasyUI 树形菜单 – 树形网格动态加载jQuery EasyUI 树形菜单 – 树形网格添加分页jQuery EasyUI 树形菜单 – 树形网格惰性加载节点jQuery EasyUI 表单 – 创建异步提交表单jQuery EasyUI 表单 – 表单验证jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)jQuery EasyUI 表单 – 格式化下拉框(ComboBox)jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)jQuery EasyUI 插件jQuery EasyUI 扩展

jQuery EasyUI 数据网格 – 启用行内编辑

jQuery EasyUI 数据网格 - 启用行内编辑

可编辑的功能是最近添加到数据网格(datagrid)的。它可以使用户添加一个新行到数据网格(datagrid)。用户也可以更新一个或多个行。

本教程向您展示如何创建一个数据网格(datagrid)和内联编辑器。

创建数据网格(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:{}
        });
    }

为了启用数据网格行内编辑,您应该添加一个 editor 属性到列中。编辑器(editor)会告诉数据网格(datagrid)如何编辑字段及如何保存字段值。正如您所看到的,我们定义的三个编辑器(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 实例

jeasyui-datagrid-datagrid12.zip