easyui datagrid一般创建模板

最新推荐文章于 2025-05-26 11:15:00 发布

弹琴弹琴

最新推荐文章于 2025-05-26 11:15:00 发布

阅读量980

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUi点滴知识文章标签： easyui

本文链接：https://blog.youkuaiyun.com/bbsyi/article/details/72304442

EasyUi点滴知识专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用 EasyUI 的 DataGrid 创建自定义模板，包括数据绑定、列配置和模板语法，帮助开发者实现复杂数据展示和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {
    var datagrid;
    var editRow = undefined;
    datagrid = $("#parameter").datagrid({
        columns: [[
         { field: 'Key', title: '字段名',halign:'center',width:'50%',editor: { type: 'textbox', options: { required: false} }},
         { field: 'Value', title: '值',halign:'center',width:'50%',editor: { type: 'textbox', options: { required: false} }}
        ]],
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {
        if (editRow != undefined) {
            datagrid.datagrid("endEdit", editRow);
        }
        if (editRow == undefined) {
            datagrid.datagrid("insertRow", {
                index: 0,
                row: {}
            });
            datagrid.datagrid("beginEdit", 0);
            editRow = 0;
            editRowNode=0;
        }
        }
        },
        { text: '删除', iconCls: 'icon-cancel', handler: function () {
            var rows = datagrid.datagrid("getSelections");
            if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                if (r) {
                    var i=datagrid.datagrid('getRowIndex', datagrid.datagrid('getSelected'));
                    datagrid.datagrid('deleteRow',i);
                    editRow=undefined;
                    editRowNode = undefined;
                }
                });
            }
            else {
               if(editRow!=undefined){
                  datagrid.datagrid('deleteRow',editRow);
                   editRow=undefined;
                     editRowNode = undefined;
               }else{
                  $.messager.alert("提示", "请选择要删除的行", "error");
               }
            }
        }
        }],
        onAfterEdit: function (rowIndex, rowData, changes) {
            editRow = undefined;
            editRowNode = undefined;
        },
        onDblClickRow: function (rowIndex, rowData) {
                datagrid.datagrid("endEdit", editRow);
            
                datagrid.datagrid("beginEdit", rowIndex);
                editRow = rowIndex;
                editRowNode = rowIndex;
            
        }
    });
    dgInitial('parameter','','d');
});