具有行特定下拉列表的JqGrid?

时间:2015-03-02 15:50:52

标签: jqgrid

这是我目前的专栏模型:

   colModel: [
                    { name: 'LastName', index: 'LastName', width: 120, align: 'center' },
                    { name: 'FirstName', index: 'FirstName', width: 120, align: 'center' },
                    { name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' },
                    { name: 'DOB', index: 'DOB', width: 100, align: 'center' },
                    { name: 'id', index: 'id', align: 'center', hidden: true },
                    { name: 'checked', index: 'checked', align: 'center', hidden: true },
                    { name: 'courtType', index: 'courtType', align: 'center', editable: true, sortable: false, width: 100 },
                    { name: 'CaseNumber', index: 'CaseNumber', align: 'center', editable: true, sortable: false, width: 100 },
                    { name: 'CourtFileNumber', index: 'CourtFileNumber', align: 'center', editable: true, sortable: false, width: 100 },
                    { name: 'WarrantDocket', index: 'WarrantDocket', align: 'center', editable: true, sortable: false, width: 100 },
                    { name: 'Sentencing', index: 'Sentencing', align: 'center', editable: true, sortable: false, width: 100 },
                    { name: 'notes', index: 'notes', align: 'center', editable: true, sortable: false, width: 400 },

                    { name: 'name', index: 'name', width: 200,
                         sortable: true,
                         align: 'center',
                         editable: true,
                         cellEdit: true,
                         edittype: 'select',
                         formatter: 'select',
                         editoptions: { value: getAllSelectOptions() }
                     }
                  ],

这给了我一个来自getAllSelectOptions()的下拉列表。

function getAllSelectOptions() {

    var states = { '1': 'Alabama', '2': 'California', '3': 'Florida',
        '4': 'Hawaii', '5': 'London', '6': 'Oxford'
    };
    return states;
}

有没有办法根据ID和webmethod调用(或其他方式)为每一行获取不同的列表?

var createCourtGridURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetGetdData";

var jqGridDataURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetSelectData";

编辑:工作代码

    var myGrid = $('#selectedInmateList'),
        decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
            var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
            if (jqXHR.responseText.charAt(0) === '[') {
                try {
                    errorInfo = $.parseJSON(jqXHR.responseText);
                    errorText = "";
                    for (i = 0; i < errorInfo.length; i++) {
                        if (errorText.length !== 0) {
                            errorText += "<hr/>";
                        }
                        errorText += errorInfo[i].ExceptionType + ": " + errorInfo[i].Message;
                    }
                }
                catch (e) { }
            } else {
                html = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
                if (html !== null && html.length > 1) {
                    errorText = html[1];
                } else {
                    errorText = jqXHR.responseText.replace(/\n/, "<br>");
                }
            }
            return errorText;
        },
        buildSelectFromJson = function (data) {
            var html = '<select>', d = data.d, length = d.length, i = 0, item;
            for (; i < length; i++) {
                item = d[i];
                html += '<option value=' + item + '>' + item + '</option>';
            }
            html += '</select>';
            return html;
        };

        myGrid.jqGrid({
            url: createCourtGridURL,
            datatype: 'json',
            ajaxGridOptions: { contentType: "application/json" },
            ajaxSelectOptions: { contentType: "application/json", dataType: 'json'/*,  type: "POST"*/ },
            serializeGridData: function (postData) {
                if (postData.filters === undefined) postData.filters = null;
                return JSON.stringify(postData);
            },
            mtype: 'POST',
            colNames: ['Id', 'Last Name', 'First Name', 'Middle Name', 'DOB', 'Checked', 'User'],
            colModel: [
            { name: 'id', index: 'id', align: 'center', hidden: true },
            { name: 'LastName', index: 'LastName', width: 120, align: 'center' },
            { name: 'FirstName', index: 'FirstName', width: 120, align: 'center' },
            { name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' },
            { name: 'DOB', index: 'DOB', width: 100, align: 'center' },
            { name: 'checked', index: 'checked', align: 'center', hidden: true },
            { name: 'User', index: 'User', width: 400, editable: true,
                stype: 'select', edittype: 'select',
                /*
                searchoptions: {
                sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
                dataUrl: jqGridDataURL,
                buildSelect: buildSelectFromJson
                },
                */
                editoptions: {
                    sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],

                    dataUrl: function () {
                        var rowID = selectedRowId = myGrid.jqGrid('getGridParam', 'selrow');
                        return jqGridDataURL + '?id=' + rowID;
                    },

                    buildSelect: buildSelectFromJson,
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                //alert('change event')
                            }
                        }
                    ]
                }
            }
        ],
            pager: '#pager',
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: 'desc',
            rownumbers: true,
            viewrecords: true,
            height: '100%',
            cellEdit: true,
            multiselect: true,
            cellsubmit: 'clientArray', //?
            pager: '#selectedInmatePager',
            gridview: true,
            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records",
                cell: ""
            },
            caption: 'Selected Court Inmates',
            loadError: function (jqXHR, textStatus, errorThrown) {
                // remove error div if exist
                $('#' + this.id + '_err').remove();
                // insert div with the error description before the grid
                myGrid.closest('div.ui-jqgrid').before(
                '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
                ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
                decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>');
            },
            loadComplete: function () {
                // remove error div if exist
                $('#' + this.id + '_err').remove();
            }
        });
    myGrid.jqGrid('navGrid', '#selectedInmatePager', { add: false, edit: true, del: false },
                  {}, {}, {}, { multipleSearch: true, overlay: false, width: 480 });

1 个答案:

答案 0 :(得分:1)

您已经使用dataUrl。 jqGrid从4.5.3开始支持dataUrl。因此,您可以将dataUrl定义为回调,从而获取树参数rowidvaluecolumnName。因此,您可以从dataUrl返回包含rowid作为参数的URL。如果对dataUrl的调用因不同的行而异,则可以实现您的要求。