jqGrid下拉框的另一种二级联动实现，

在网上翻了好多资料也没有找到合适的方法，一气之下决定自己写一个，看来创造力是逼出来的。^^

之前一直纠结于edittype属性，所以一直不能从梅比乌斯怪圈里蹦出来，直到下午决定放弃的时候想起了强大的formatter属性。

转换思维很重要啊亲。

废话不多说，代码如下

<script type="text/javascript">
    var grid;
    $(document).ready(function () {
        grid = $("#grdTest1");
        initGrid([]);
        //查询测试数据
        $("#btnSearch").click(function () {
            var data1 = [{ "Name": "Price", "Week": "mo", "Subject": "" },
                        { "Name": "On Promotion", "Week": "tu", "Subject": "" },
                        { "Name": "Magazine Advertisement", "Week": "th", "Subject": "" },
                        { "Name": "Television Advertisement", "Week": "we", "Subject": "" },
                        { "Name": "Manufacturer", "Week": "fr", "Subject": "" },
                        ];
            fn_Grid(data1);
        });
        //给jqGrid的下拉框注册change事件
        $("#grdTest1").on("change", ".week", function (e) {
            var week = $(this).val();
            var cellHtm = "";
            //获取新的subject下拉框数据
            var celllist = getSubjects(week);
            $(celllist).each(function (idx, row) {
                cellHtm = cellHtm + "<option value='" + row.value + "' >" + row.name + "</option>";
            });
           //找到subject单元格的下拉框后赋值
            $(this).parent().parent().find(".subject").empty().append(cellHtm);
        });
    });
</script>

下面是jqgrid部分

<script type="text/javascript">
    function fn_Grid(mydata) {
        grid.clearGridData();
        grid.setGridParam({
            data: mydata
        })
        .setGridWidth(document.documentElement.clientWidth - 334)
        .setGridHeight(document.documentElement.clientHeight - 514)
        .trigger("reloadGrid");
    }

    function initGrid(mydata) {
        grid.jqGrid({
            datatype: "local",
            data: mydata,
            colModel: [
                { name: 'Name', label: 'Name', width: 100, align: "center" },
                { name: 'Week', label: 'Week', width: 65, align: "center", formatter: fn_FormatCombo, unformat:fn_UnFormatCombo },
                { name: 'Subject', label: 'Subject', width: 100, align: "center", formatter: fn_FormatCombo2, unformat: fn_UnFormatCombo2,cellattr: }
                ],
            rowList: [10, 20, 30],
            rownumbers: true,
            viewrecords: true,
            shrinkToFit: false,
            pager: jQuery('#pager'),
            width: document.documentElement.clientWidth - 334,
            height: document.documentElement.clientHeight - 214
        });
    }
    //格式化Week列，
    var fn_FormatCombo = function (cellvalue, options, rowObject) {
            var cellHtm = "<select class='week' style='width:65px;margin:0px;'>";
            $(iweek).each(function (idx, row) {
                var tselected = (row.value === cellvalue) ? "selected" : "";
                cellHtm = cellHtm + "<option value='" + row.value + "' "+tselected+">" + row.name + "</option>";
            });
            cellHtm = cellHtm + "</select>"
            return cellHtm;
        }
        , fn_UnFormatCombo = function (cellvalue, options, cell) {
            return $(".week", cell).val();
        }
        //格式化Subject列
        ,fn_FormatCombo2 = function (cellvalue, options, rowObject) {
            var cellHtm = "<select class='subject' style='width:100px;margin:0px;'>";
            var celllist = getSubjects(rowObject.Week);
            $(celllist).each(function (idx, row) {
                var tselected = (row.value === cellvalue) ? "selected" : "";
                cellHtm = cellHtm + "<option value='" + row.value + "' " + tselected + ">" + row.name + "</option>";
            });
            cellHtm = cellHtm + "</select>"
            return cellHtm;
        },
        fn_UnFormatCombo2 = function (cellvalue, options, cell) {
            return $(".subject", cell).val();
        };
</script>

下面是测试数据

<script type="text/javascript">
    var iweek = [{ value: 'mo', name: '周一' }, { value: 'tu', name: '周二' }, { value: 'we', name: '周三' }, { value: 'th', name: '周四' }, { value: 'fr', name: '周五'}];
    function getSubjects(wk) {
        switch (wk) {
            case 'mo':
                return [{ value: 'yw', name: '语文' }, { value: 'sx', name: '数学'}];
                break;
            case 'tu':
                return [{ value: 'en', name: '英语' }, { value: 'sx', name: '数学'}];
                break;
            case 'we':
                return [{ value: 'wl', name: '物理' }, { value: 'hx', name: '化学'}];
                break;
            case 'th':
                return [{ value: 'ty', name: '体育' }, { value: 'mu', name: '音乐'}];
                break;
            case 'fr':
                return [{ value: 'wh', name: '物化' }, { value: 'bi', name: '生物'}];
                break;
        }
    }
</script>

Html部分

<div>
    <button type="button" id="btnSearch" class="btn"><i class="icon-star"></i>Search</button>
</div>
<div style="margin-top:10px;">
    <table id="grdTest1"></table>
    <div id="pager">
    </div>
</div>