Jqgrid - 绑定第二个下拉列表的值,这取决于表单编辑的第一个下拉列表

时间:2015-02-11 19:36:44

标签: jquery-ui jqgrid

我有2个级联下拉列表。添加时,我会根据使用Dataevents的第一个下拉选项填充第二个下拉列表。 如何在编辑表单时绑定第二个下拉列表的值? 请帮我。

<script type="text/javascript">
                var buildSelectFromJson = function (data) {
                    var html = '<select><option value="">--- Select ---</option>', d = data.d, length = d.length, i = 0, item;
                    for (; i < length; i++) {
                        item = d[i];
                        html += '<option value="' + item.id + '">' + item.value + '</option>';
                    }
                    html += '</select>';
                    return html;
                };
                var values = ":--- Select ---";
                var setTowers = function (buid) {
                    $.ajax({
                        type: "POST",
                        url: "AdminDropDown.asmx/selectTowersbyBUs",
                        //data: '{name: "abc" }',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: '{"buid":' + buid + '}',
                        ajaxOptions: { contentType: 'application/json; charset=utf-8' },
                        contentType: "application/json; charset=utf-8",
                        serializeData: function (postData) {
                            // serialize the parameters as JSON string
                            return JSON.stringify(postData);
                        },
                        success: function (data) {
                            var newOptions = '<option role="option" value="">--- Select ---</option>';
                            $.each(data.d, function (key, value) {
                                newOptions += '<option role="option" value="' + value.id + '">' +
                value.value + '</option>';
                            });

                            var form = $('#BUId').closest('form.FormGrid');
                            $("select#TowerId.FormElement", form[0]).html(newOptions);
                        },
                        failure: function () {
                            alert("Failed loading Towers!");
                        }
                    });
                }
                function loadGrid() {
                    $("#jqGrid").jqGrid({
                        url: 'UserCreation.aspx/GetUserAccess',
                        datatype: 'json',
                        mtype: 'POST',
                        colNames: ["Access Id", "BU id", "Business Unit", "Tower Id", "Tower", "ProcessId", "Process", "UserRoleId", "User Role"],
                        colModel: [
                            { name: 'AccessId', index: 'AccessId', jsonmap: 'AccessId', hidden: true },
                            {
                                name: 'BUId', index: 'BUId', jsonmap: 'BUId', hidden: true, editable: true, edittype: 'select', editoptions: {
                                    dataUrl: 'AdminDropDown.asmx/selectBusinessUnits',
                                    buildSelect: buildSelectFromJson,
                                    dataEvents: [{
                                        type: 'change',
                                        fn: function (e) {
                                            //resetTowersValues();
                                            var buid = $(e.target).val();
                                            alert(buid);
                                            setTowers(buid);

                                        }
                                    }]
                                }, editrules: { required: true, edithidden: true }, formoptions: { label: 'Business Unit' }
                            },
                            { name: 'BUName', index: 'BUName', jsonmap: 'BUName' },
                            {
                                name: 'TowerId', index: 'TowerId', jsonmap: 'TowerId', hidden: true, editable: true, edittype: 'select',
                                editoptions: {
                                    value: values,
                                    dataEvents: [{
                                        type: 'change',
                                        fn: function (e) {
                                            //resetTowersValues();
                                            var buid = $('#BUId').val();
                                            var towerid = $(e.target).val();
                                            //setTowers(buid);
                                            $.ajax({
                                                type: "POST",
                                                url: "AdminDropDown.asmx/selectProcessbyTowersBUs",
                                                //data: '{name: "abc" }',
                                                contentType: "application/json; charset=utf-8",
                                                dataType: "json",
                                                data: '{"buid":' + buid + ',"towerid":' + towerid + '}',
                                                ajaxOptions: { contentType: 'application/json; charset=utf-8' },
                                                contentType: "application/json; charset=utf-8",
                                                serializeData: function (postData) {
                                                    // serialize the parameters as JSON string
                                                    return JSON.stringify(postData);
                                                },
                                                success: function (data) {
                                                    var newOptions = '<option role="option" value="">--- Select ---</option>';
                                                    $.each(data.d, function (key, value) {
                                                        newOptions += '<option role="option" value="' + value.id + '">' +
                                        value.value + '</option>';
                                                    });

                                                    var form = $(e.target).closest('form.FormGrid');
                                                    $("select#ProcessId.FormElement", form[0]).html(newOptions);
                                                },
                                                failure: function () {
                                                    alert("Failed loading Process!");
                                                }
                                            });
                                        }
                                    }]
                                },
                                editrules: { required: true, edithidden: true }, formoptions: { label: 'Tower' }
                            },
                            { name: 'TowerName', index: 'TowerName', jsonmap: 'TowerName' },
                            {
                                name: 'ProcessId', index: 'ProcessId', jsonmap: 'ProcessId', hidden: true, editable: true, edittype: 'select', editoptions: {
                                    value: values
                                    //dataUrl: 'AdminDropDown.asmx/selectProcess',
                                    //buildSelect: buildSelectFromJson
                                }, editrules: { required: true, edithidden: true }, formoptions: { label: 'Process' }
                            },
                            { name: 'PreocessName', index: 'PreocessName', jsonmap: 'PreocessName' },
                            {
                                name: 'UserRoleId', index: 'UserRoleId', jsonmap: 'UserRoleId', hidden: true, editable: true, edittype: 'select', editoptions: {
                                    dataUrl: 'AdminDropDown.asmx/selectUserRoles',
                                    buildSelect: buildSelectFromJson
                                }, editrules: { required: true, edithidden: true }, formoptions: { label: 'User Role' }
                            },
                            {
                                name: 'UserRoleName', index: 'UserRoleName', jsonmap: 'UserRoleName', width: 150,
                            }
                        ],
                        ajaxSelectOptions: { contentType: "application/json", dataType: 'json', type: "POST" },
                        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                        contentType: "application/json; charset=utf-8",
                        serializeGridData: function (postData) {
                            return JSON.stringify($.extend(true,{},postData, {
                                userid: $('#huserid').val()
                            }));
                        },
                        caption: "User Access Information",
                        viewrecords: true,
                        gridview: true,
                        autoencode: true,
                        //loadonce: true,
                        loadError: function (xhr, st, err) {
                            alert("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText + err);
                        },
                        jsonReader: {
                            root: function (obj) { return obj.d; }, //array containing actual data
                            page: function (obj) { return 1; },
                            total: function (obj) { return obj.d.length / 25; },
                            records: function (obj) { return obj.d.length; }, //total number of records
                            repeatitems: false,
                            id: 'AccessId',
                            cell: '',
                        },
                        rownumbers: true,
                        autowidth: true,
                        height: 250,
                        rowNum: 25,
                        rowList: [25, 50, 100],
                        pager: "#jqGridPager",

                    }).navGrid('#jqGridPager', { edit: true, add: true, del: true, view: true }, // Edit options 
                    {
                        autowidth: true,
                        savekey: [true, 13],
                        reloadAfterSubmit: true,
                        jqModal: false,
                        closeOnEscape: true,
                        closeAfterEdit: true,
                        url: 'UserCreation.aspx/UpdateUserAccess',
                        datatype: 'json',
                        mtype: 'POST',
                        ajaxEditOptions: { contentType: 'application/json; charset=utf-8' },
                        contentType: "application/json; charset=utf-8",
                        serializeEditData: function (postData) {
                            //alert(postData.formVars);
                            // serialize the parameters as JSON string

                            return JSON.stringify(postData);
                        },
                        //onClickSubmit:function(
                        afterSubmit: function (response, postdata) {
                            var res = $.parseJSON(response.responseText);
                            alert(postdata.id + ' updated successfully');
                            return [true, response.responseText, '']
                        }
                    },
                    {
                        savekey: [true, 13],
                        reloadAfterSubmit: true,
                        jqModal: false,
                        closeOnEscape: true,
                        closeAfterAdd: true,
                        url: 'UserCreation.aspx/UpdateUserAccess',
                        datatype: 'json',
                        mtype: 'POST',
                        ajaxEditOptions: { contentType: 'application/json; charset=utf-8' },
                        contentType: "application/json; charset=utf-8",
                        serializeEditData: function (postData) {
                            // serialize the parameters as JSON string
                            return JSON.stringify($.extend(true, {}, postData, {
                                userid: $('#huserid').val()
                            }));
                            //return JSON.stringify(postData);
                        },
                    },
                    {
                        savekey: [true, 13],
                        reloadAfterSubmit: true,
                        jqModal: false,
                        closeOnEscape: true,
                        closeAfterDelete: true,
                        url: 'UserCreation.aspx/DeleteUserAccess',
                        datatype: 'json',
                        mtype: 'POST',
                        ajaxDelOptions: { contentType: 'application/json; charset=utf-8' },
                        contentType: "application/json; charset=utf-8",
                        serializeDelData: function (postData) {
                            delete postData.oper;
                            return JSON.stringify(postData);
                        },
                        afterSubmit: function (response, postdata) {
                            var res = $.parseJSON(response.responseText);
                            alert(postdata.id + ' ' + res.d);
                            return [true, res.d];
                        }
                    });
                }
            </script>

0 个答案:

没有答案