带有Bootstrap Multiselect和自定义保存的JQGrid

时间：2015-07-20 16:56:41

标签： jqgrid

我需要解决2个要求。我在aspx页面上使用JQGrid和其他表单控件。保存主窗体会生成一个填充在隐藏字段中的数据库ID。如果隐藏字段为空，我不想保存网格记录，因为我首先需要db id。如果隐藏字段有值，我想用editurl保存行。

第二部分与其中一个网格列中的Bootstrap multiselect有关（我需要过滤功能）。当用户从多选中选择一个值时，我想用所选的值填充PERNR列。我不能将onchange事件用于多选，因为如果用户没有从第一个选项改变，显然它不会触发事件。

如何解决这两个问题？

var roleDdlItems = $.parseJSON($("input[id$='hdfRoleDdlItems']").val());
$("#grdParticipants").jqGrid({
    jsonReader: {
        repeatitems: false,
        root: 'Table',
        page: function (obj) { return 1; },
        total: function (obj) { return 2; },
        records: function (obj) { return obj.ItemCount; },
        id: "0"
    },
    caption: getParticipantCaption(),//"Participants",
    pgbuttons: false,
    recordtext: "Total: {2}",
    emptyrecords: "",
    loadtext: "Loading...",
    pgtext: "",
    datatype: function () {
        UpdateParticipant("getParticipants");
    },
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    //        serializeGridData: function (postData) { return JSON.stringify(postData); },
    colNames: ['Id', 'PERNR', 'Name', 'Email', 'RoleId', 'Role', 'Active', 'Updated'],
    colModel: [
                { name: 'Id', index: 'Id', hidden: true, editable: true, hidedlg: true },
                { name: 'PERNR', index: 'PERNR', hidden: true, editable: true, hidedlg: true },
                { name: 'Name', index: 'Name', width: 200, align: "center", editable: true, edittype: "select", 
                    editoptions: { value: function () {
                        var ITDdlItems = $.parseJSON($("input[id$='hdfITEmployeesDdlItems']").val());
                        var s = "";
                        if (ITDdlItems.Table4 && ITDdlItems.Table4.length) {
                            for (var i = 0, l = ITDdlItems.Table4.length; i < l; i++) {
                                var item = ITDdlItems.Table4[i];
                                s += item.PERNR + ":" + item.Name + ";";
                            }
                        }
                        s = s.substring(0, s.length - 1);
                        return s;
                    },
                        dataInit: function (e) {
                            $(e).multiselect({
                                maxHeight: 200,
                                enableFiltering: true,
                                filterPlaceholder: "Search Employees",
                                enableCaseInsensitiveFiltering: true,
                                templates: {
                                    filter: '<li class="multiselect-item filter"><div class="input-group"><input class="form-control input-sm multiselect-search" id="txtITEmployeeFilter" type="text"></div></li>',
                                    filterClearBtn: "<span class='input-group-btn'><button class='btn btn-default input-sm multiselect-clear-filter' type='button'><i class='glyphicon glyphicon-remove'></i></button><button class='btn btn-primary input-sm multiselect-clear-filter' type='button' onclick='javascript:searchEmployees(&quot;#" + e.id + "&quot;);'><i class='glyphicon glyphicon-search'></i></button></span>"
                                },
                                onDropdownHide: function (event) {
                                    $(e).multiselect("updateButtonText");
                                    $(e).multiselect("updateSelectAll");
                                }
//                                    onChange: function(option, checked) {
//                                        var selectedOption = $("#" + e.id + " option:selected").val();
//                                        alert(selectedOption);
//                                    }
                            });
                        }
                    }
                },
                { name: 'Email', index: 'Email', width: 250, align: "center", editable: false },
                { name: 'RoleId', index: 'RoleId', hidden: true, editable: true, hidedlg: true },
                { name: 'Role', index: 'Role', width: 175, align: "center", editable: true, edittype: "select",
                    editoptions: { value: function () {
                        var roleDdlItems = $.parseJSON($("input[id$='hdfRoleDdlItems']").val());
                        var s = "";
                        if (roleDdlItems.Table3 && roleDdlItems.Table3.length) {
                            for (var i = 0, l = roleDdlItems.Table3.length; i < l; i++) {
                                var item = roleDdlItems.Table3[i];
                                s += item.Id + ":" + item.Role + ";";
                            }
                        }
                        s = s.substring(0, s.length - 1);
                        return s;
                    },
                        dataInit: function (e) {
                            $(e).multiselect({
                                maxHeight: 200,
                                onDropdownHide: function (event) {
                                    $(e).multiselect("updateButtonText");
                                    $(e).multiselect("updateSelectAll");
                                }
                            });
                        }
                    }

                },
                {
                    name: 'Active', index: 'Active', hidden: false, width: 75, align: "center", editable: true, hidedlg: true,
                    edittype: 'checkbox', editoptions: { value: "true:false", defaultValue: "Active" },
                    formatter: "checkbox", formatoptions: { disabled: true }
                },
                { name: 'Updated', index: 'Updated', width: 100, align: "center", editable: false, sorttype: "date",
                    formatter: 'date', formatoptions: { newformat: 'n/j/y g:i A' }
                }
    ],
    rowNum: 5000,
    autoWidth: true,
    rowList: [],
    pager: '#pgrParticipants',
    toppager: true,
    sortname: 'Name',
    viewrecords: true,
    sortorder: 'asc'
});

$('#grdParticipants').navGrid("#pgrParticipants", {edit: false, add: false, del: true, refresh: false, search: false, view: false});

$('#grdParticipants').inlineNav('#pgrParticipants',
// the buttons to appear on the toolbar of the grid
            {
            edit: true,
            add: true,
            del: true,
            cancel: true,
            editParams: {
                keys: true
            },
            addParams: {
                addRowParams: {
                    keys: true
                }
            }
        });
            $('#grdParticipants').navSeparatorAdd('#pgrParticipants', {
        sepclass: 'ui-separator',
        sepcontent: '',
        position: 'last'
    });

    $('#grdParticipants').navButtonAdd('#pgrParticipants',
    {
        buttonicon: "ui-icon-help",
        title: "Roles & Responsibilities Matrix",
        caption: "Roles & Responsibilities Matrix",
        position: "last",
        onClickButton: showRoleMatrix
    });

*编辑*

数据类型函数包含填充网格的ajax调用。我使用的是基于我公司提供的其他人的示例。今天我会环顾四周找一个更好的方法，因为听起来这不是最好的方法。也许正在使用我今天偶然发现的网址。

这是一个用于跟踪中断的选项卡界面，最终总共有5个单独的JQGrids。当页面最初加载新的中断时，此网格位于第一个选项卡上并为空。如果他们正在编辑现有的中断，它将只包含记录。在那个例子中，我将填充主要中断表单控件中的值并在网格中加载数据。 UpdateParticipant函数似乎运行良好，因为它允许我在决定是否需要db调用之前检查该隐藏字段。

PERNR是用户不需要知道的员工ID，因此是隐藏的。这不是严格保密的信息，但我们也不做广告。他们只需要根据从名称multiselect中选择的值来查看姓名和电子邮件（可能）。在保存网格数据后，Id将是数据库生成的参与者ID。在上面的主要中断表单被保存之前不会发生这种情况，因为我需要将唯一的Outage Id作为参与者的外键。这会将参与者附加到中断，并成为网格行的唯一ID。

selectedOption = $("#" + e.id + " option:selected").val()被注释掉了，但只是触发了针对特定Bootstrap Multiselect的onchange。角色multiselect没有在代码中注册的onchange函数。所以是的，它只适用于一个元素。如前所述，我试图使用它来填充名称选择上的PERNR。我需要PERNR而不是Name以便稍后保存到db。为了解决这个问题，我在该列上使用了自定义格式化程序，因此我已经为Name multiselect删除了onchange函数。 ITDdlItems = $.parseJSON($("input[id$='hdfITEmployeesDdlItems']").val())包含员工姓名和PERNR的json列表，用于填充Name multiselect。这很好，所以这不是代码相关的。

我唯一需要弄清楚的是如何在将网格数据发布到服务器之前在隐藏字段中执行OutageId检查。昨晚考虑一下，如果一切都失败了，我会让它发布到服务器并检查OutageId。如果它不打算进行数据库调用，我只是不喜欢发帖。如果我知道如何，我会在某个地方分享一个演示。这是一个内部应用程序，所以我的选择是有限的。

0 个答案:

没有答案
相关问题
最新问题