JQGrid 下拉联动效果 dataEvents 回调

 

JQGrid 下拉联动效果  dataEvents 回调

$(function() {
    var defaults = {
        caption: 'Mail Manage',
        url: 'Mail.ashx',
        pager: 'pager01',
        height: "100%",
        width: 800,
        type: 'POST',
        beforeRequest: function() {
            var postData = $("#list01").jqGrid("getGridParam", "postData"); //获取jqgrid post到服务端的参数
            $.extend(postData, { actiontype: "getMailList" });       //将参数附加到jqgrid 原有参数         这里是我自定义的一个参数传到后台
        },
        colNames: ['ID', '客戶簡稱', '類型', '客戶名稱', '語言', 'Mail', 'MailBooking', 'Creater', 'MailReceiving', 'MailShipping', 'MailReceived', 'Mail14', 'Remark'],
        colModel: [
        {
            name: 'ID', index: 'ID'
        }, {
            name: 'Name', index: 'Name', width: 90, editable: true, edittype: 'text', editoptions: { width: 100, size: 30, maxlength: 100, readonly: true }, editrules: { required: true }
        }, {
            name: 'Role', index: 'Role', width: 90, editable: true, edittype: 'select'
            , editoptions: {
                size: 30, value: { '出貨人': '出貨人', '收貨人': '收貨人', '承運人': '承運人', 'Bondex': 'Bondex' }
                , dataEvents: [
                   { type: 'change',          //下拉选择的时候
                       fn: function(e) {

                           var str = "";
                           $.ajax({
                               url: 'Mail.ashx',
                               async: false,
                               cache: false,
                               dataType: "json",
                               data:{
                                    actiontype:this.value  //传入值，到后台获取json
                                },
                               success: function(json) {
                                    if (json != null) {
                                       var jsonobj = eval(json);

                                       var length = jsonobj.length;
                                       for (var i = 0; i < length; i++) {   //循环option
                                           if (i != length - 1) {
                                               str += "<option>" + jsonobj[i].text + "</option>;";
                                           } else {
                                               str += "<option>" + jsonobj[i].text + "</option>";
                                           }
                                       }
                                     }
                                }
                           });
                           var rolename = $("select#RoleName");   //获取下面下拉框RoleName对象

                           rolename.append(str);                         // 然后绑定下拉框
                       }
                   }
                ]
            }
        }, {
            name: 'RoleName', index: 'RoleName', label: "客戶全稱", width: 90, editable: true, edittype: 'select', editoptions: { size: 30, value: { '': ''}}    //dataUrl : 'Mail.ashx?actiontype=getShipping'
        }, {
            name: 'Language', index: 'Language', editable: true, edittype: 'select', editoptions: { value: { '英語': '英語', '繁體': '繁體' }, size: 30, maxlength: 35 }
        }, {
            name: 'Mail', index: 'Mail', editable: true, edittype: 'textarea', editoptions: { rows: "3", cols: "100", width: 180, height: 150, size: 10, maxlength: 350 }
        }, {
            name: 'MailBooking', index: 'MailBooking', editable: true, edittype: 'textarea', editoptions: { rows: "3", cols: "100", size: 10, maxlength: 35 }
        }, {
            name: 'Creater', index: 'Creater', editable: false, edittype: 'text', editoptions: { size: 10, maxlength: 35 }
        }, {
            name: 'MailReceiving', index: 'MailReceiving', hidden: true, editable: true, edittype: 'textarea', editrules: { edithidden: true }, editoptions: { rows: "3", cols: "100", size: 100, maxlength: 35 }
        }
        , {
            name: 'MailShipping', index: 'MailShipping', hidden: true, editable: true, edittype: 'textarea', editrules: { edithidden: true }, editoptions: { rows: "3", cols: "100", size: 100, maxlength: 35 }
        }, {
            name: 'MailReceived', index: 'MailReceived', hidden: true, editable: true, edittype: 'textarea', editrules: { edithidden: true }, editoptions: { rows: "3", cols: "100", size: 100, maxlength: 35 }
        }, {
            name: 'Mail14', index: 'Mail14', hidden: true, editable: true, edittype: 'textarea', editrules: { edithidden: true }, editoptions: { rows: "3", cols: "100", size: 10, maxlength: 35 }
        }, {
            name: 'Remark', index: 'Remark', hidden: true, editable: true, edittype: 'textarea', editrules: { edithidden: true }, editoptions: { rows: "3", cols: "100", size: 10, maxlength: 200 }
        }
    ],
        rowNum: 15,
        ajaxGridOptions: {
            type: 'POST',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json'
        },
        datatype: 'json',
        viewrecords: true,
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "ID",
            userdata: "userdata",
            subgrid: {
                root: "rows",
                repeatitems: true,
                cell: "cell"
            }
        },
        prmNames: {
            page: "page",
            rows: "rows",
            sort: "sidx",
            order: "sord",
            search: "search",
            nd: "nd",
            id: "ID",
            oper: "oper",
            editoper: "edit",
            addoper: "add",
            deloper: "del",
            npage: null,
            totalrows: "totalrows"
        }
        , multiselect: false

    };

    $('#list01').jqGrid(defaults);  //調用方法


    jQuery("#list01").jqGrid('navGrid', '#pager01', { del: false, add: false, edit: false, search: false });


    $("#Button1").click(function() {
        rowid = jQuery("#list01").jqGrid("getGridParam", "selrow");
        rowdata = jQuery("#list01").jqGrid("getRowData", rowid);
        jQuery("#list01").jqGrid('editGridRow', rowid, { width: '680', height: '600'
                , datatype: 'json'
                , reloadAfterSubmit: false
                , afterSubmit: function(data, postd) {
                    return { 0: true };
                },
            afterComplete: function(data, postd) {
                return true;
            },
            url: 'Mail.ashx',
            msg: "you msg"
                , datatype: 'json'
        });
    });

 


});

给大家分享。如有疑问，请留言