EasyUI-DataGrid编辑时出现下拉列表框选择，同时修改其它列的值

最新推荐文章于 2023-09-15 17:39:57 发布

秋冬瓜

最新推荐文章于 2023-09-15 17:39:57 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： EasyUI datagrid 下拉列表修改其它列值

本文链接：https://blog.youkuaiyun.com/u013493957/article/details/42551663

JQuery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在使用EasyUI的DataGrid时，如何实现在编辑列时出现下拉列表供选择，并且在选择下拉选项的同时能够修改其他列的值。通过对DataGrid的配置和事件监听，实现数据表格的高效交互。

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

首先是进行表格式的初始化，主要是为了可以进行编辑

//初始化表格
$.extend($.fn.datagrid.methods, {
    editCell: function (jq, param) {
        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]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    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 }
    if ($('#tb_Details').datagrid('validateRow', editIndex)) {
        $('#tb_Details').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickCell(index, field) {
    if (endEditing()) {
        $('#tb_Details').datagrid('selectRow', index)
                .datagrid('editCell', { index: index, field: field });
        editIndex = index;
    }
}

，接下来就是对具体的操作了

//初始化表格
    function IntideTable() {
        $("#tb_Details").datagrid({
            url: "../OfficePurchase.mvc/OfficePurchaseApplyDetails",
            width: "auto",
            height: "auto",
            fitColumns: true,
            singleSelect: false,
            onClickCell: onClickCell,
            rownumbers: true, //行号
            frozenColumns:
             [[
                  { field: "ck", checkbox: true }
             ]],
            columns: [[
                 { field: "ID", title: "ID", hidden: true },
               { field: "SuppliesName", title: "用品名称", width: 100, align: "left" },
               { field: "Spec", title: "规格", width: 100, align: "left" },
               { field: "ModelType", title: "型号", width: 100, align: "left" },
               { field: "ProductionPlace", title: "产地", width: 100, align: "left" },
               { field: "StaticNumber", title: "当前库存", width: 50, align: "left" },
               {
                   field: "ApplyNumber", title: "申请数量", width: 50, align: "left",
                   editor: { type: 'numberbox', options: { precision: 0, min: 1 } }
               },
               { field: "Units", title: "单位", width: 50, align: "left" },
               {
                   field: "Remarks", title: "备注", width: 100, align: "left",
                   editor: {
                       type: 'combobox',
                       options: {
                           valueField: 'LicensePlate',
                           textField: 'LicensePlate',
                           url: '/VehicleInsurance.mvc/GetAllPlanteG',
                           onSelect: function (rec) {
                               $("#tb_Details").datagrid("acceptChanges");//提交修改的数据   
                           },
                           required: true
                       }
                   }
               }
            ]],
            onAfterEdit: function (rowIndex, rowData, changes) {//编辑完触发  
                var row = $('#tb_Details').datagrid('getData').rows[rowIndex];
                row["Units"] = changes["Remarks"]; //refreshRow
                $('#tb_Details').datagrid('refreshRow', rowIndex);
            },
            toolbar: [
            {
                text: "新增",
                iconCls: "icon-add",
                handler: function () {
                    JsDraftSave();
                    openOfficeList();

                }
            }, "-",
            {
                text: "删除",
                iconCls: "icon-remove",
                handler: function () {
                    DelGridData();
                }
            }
            ],
            queryParams:
                {
                    ApplyNo: "@ViewBag.ApplyNo"
                }
        });
    }

值得注意的就是，代码中的

tb_Details是HTML元素中的Table标签