如何在subGrid中绑定和取消绑定事件

时间:2017-08-08 07:58:29

标签: javascript jquery asp.net-mvc jqgrid

当subGridRowExpanded时,我有一个jqGrid和SubGrid,当SubGrid为null时,我想要unbind事件展开行和图标展开行数据。当我从其他网格拖动一行到此SubGrid时,我想再次为subGridRowExpanded绑定事件添加图标展开行到网格。我怎么能这样做?

我在加载gridComplete时取消绑定事件subGridRowExpanded:

function CreateOperationGrid(styleCode, styleSize, styleColorSerial, revNo) {
    Operation_Grid.jqGrid({
        datatype: "json",
        height: 250,
        width: null,
        shrinkToFit: false,
        rowNum: 100000,
        rownumbers: true,
        gridview: false,
        //==========================================
        url: "/OpsLink/GetOpDetail",
        caption: "Operation",
        postData: {
            styleCode: styleCode, size: styleSize, serial: styleColorSerial, revNo: revNo
        },
        //mtype: 'POST',
        colModel: [
            {
                name: "BenchmarkTime",
                index: "BenchmarkTime",
                width: 95,
                label: arrColname.BENCHMARKTIME,
                align: "center",
                search: false,
                sort: false
            },
            { name: "StyleCode", index: "StyleCode", hidden: true },
            { name: "StyleSize", index: "StyleSize", hidden: true },
            { name: "StyleColorSerial", index: "StyleColorSerial", hidden: true },
            { name: "RevNo", index: "RevNo", hidden: true },
            { name: "OpRevNo", index: "OpRevNo", hidden: true },
            { name: "NewPrevNo", index: "NewPrevNo", hidden: true }
        ],
        grouping: true,
        groupingView: {
            groupField: ["OpGroupName"],
            groupColumnShow: [false],
            groupCollapse: true,
            plusicon: "ace-icon fa fa-plus",
            minusicon: "ace-icon fa fa-minus"
        },
        subGrid: true,
        subGridRowExpanded: function (subgridId, rowId) {
            var row = Operation_Grid.getRowData(rowId);
            var sCode = row.StyleCode;
            var subgridTableId = subgridId + "_t";
            jQuery("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table>");
            jQuery("#" + subgridTableId).jqGrid({
                url: "/OpsLink/GetProtBomPattern?styleCode=" + sCode,
                datatype: "json",
                page: 1,
                colModel: [
                    { label: arrOpChilName.OpRevNo, name: "OpRevNo", index: "OpRevNo", width: 80 },
                    { label: arrOpChilName.OpSerial, name: "OpSerial", index: "OpSerial", width: 80 },
                    { label: arrOpChilName.OpType, name: "OpType", index: "OpType", width: 80 },
                    { label: arrOpChilName.ConSumUnit, name: "ConSumUnit", index: "ConSumUnit", width: 80 },
                    { label: arrOpChilName.UnitConSumTion, name: "UnitConSumTion", index: "UnitConSumTion", width: 80 },
                    { label: arrOpChilName.PieceQty, name: "PieceQty", index: "PieceQty", width: 80 }

                ],
                viewrecords: true,
                height: "100%",
                rownumbers: true,
                multiselect: true,
                pager: "#jqGridPager" + "_" + subgridId
            });
        },
        subGridOptions: {
            plusicon: "ace-icon fa fa-plus",
            minusicon: "ace-icon fa fa-minus",
            openicon: "ui-icon-carat-1-sw",
            expandOnLoad: false,
            selectOnExpand: false,
            reloadOnExpand: false
        },
        gridComplete: function () {
            Operation_Grid.find('tr[role="row"]').addClass("ui-droppable");
            $('td[aria-describedby="Operation_Grid_NewPrevNo"]').each(function () {
                var x = $(this).html();
                if (x === "&nbsp;") {
                    $(this).parent().find('td[aria-describedby="Operation_Grid_subgrid"]').unbind("click").html("");
                }
            });
        }
    });
}

我想再次注册活动:

Operation_Grid.find('tr[id="' + rowDropTo + '"]').find('td[aria-describedby="Operation_Grid_subgrid"]').bind("click").html('<a style="cursor:pointer;"><span class="ui-icon ui-icon-plus"></span></a>');

但是当我点击Icon时它没有运行功能subGridRowExpanded。请帮助,谢谢

2 个答案:

答案 0 :(得分:1)

经过两天的研究,我一直是这样的重生者。

  1. 之前将其删除为数组:
  2. currChild [id] = $(this).parent()。find(&#39; td [aria-describedby =&#34; Operation_Grid_subgrid&#34;]&#39;)。clone(true,true) ;                     $(这).parent()找到(&#39; TD [咏叹调-describedby =&#34; Operation_Grid_subgrid&#34;]&#39)。解除绑定(&#34;单击&#34)HTML(。 &#34;&#34);

    1. bin。

      Operation_Grid.find(&#39; tr [id =&#34;&#39; + rowDropTo +&#39;&#34;]&#39;)。find(&#39; td [aria -describedby =&#34; Operation_Grid_subgrid&#34;]&#39;。)replaceWith(currChild [rowDropTo]);

答案 1 :(得分:0)

如果您使用Guriddo jqGrid,请查看我们的demo example here

编辑:您的案例的另一个可能的解决方案是显示和隐藏图标(点击绑定中的href标记),而不是绑定解绑事件。