如何查看复选框并在jqxTreeGrid

时间:2018-04-26 11:32:15

标签: jqwidget jqxtreegrid

我想在下面的代码中在jqxTreeGrid中检查和禁用一些复选框:

     $("#treegrid_portfolio").jqxTreeGrid(
        {
            source: dataAdapter,
            pageable: true,
            pagerMode: 'advanced',
            pageSizeMode: 'root',
            pageSize: 5,
            pageSizeOptions: ['1', '2', '3', '5', '10'],
            columnsResize: true,
            sortable: true,
            filterable: true,
            theme: "custom",
            filterMode: 'advanced',
            altRows: false,
            checkboxes: true,
            columnsReorder: true,
            hierarchicalCheckboxes: true,
            width: getWidth("TreeGrid"),
            /*width: "100%",*/
            ready: function () {
                $("#treegrid_portfolio").jqxTreeGrid('expandRow', '1');
                $("#treegrid_portfolio").jqxTreeGrid('expandRow', '2');
            }
            ,
            columns: [
                {
                    text: "ID", dataField: "formattedID", width: 120, pinned: true, cellclassname: "requestIdCls", resizable: false
                }
                ,
                {
                    text: '', datafield: 'alert', cellsrenderer: linkrendererAlert, width: 60, pinned: true, cellclassname: "alert_column", cellsAlign: 'center', filterable: false, resizable: false
                }
                ,
                {
                    text: "Portfolio Items Name", dataField: "PortfolioItem_Name", width: 200
                }
                ,
                {
                    text: "Agile Central Project Name", dataField: "AC_ProjectName", width: 200
                }



            ]
        }
    );

是否可以在网格就绪功能上进行相同的操作。我对jqwidget做了一些研究。但没有得到任何解决方案或线索。请帮助我任何人。

2 个答案:

答案 0 :(得分:1)

您需要进行以下更改,只需为每个列数据添加id属性。然后将选择ID设置为true。

按照此链接,我为您提供了一个小提琴Invoke the uncheckRow method.

    <!DOCTYPE html>
<html>
<body>

<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>

<p id="demo">Click me.</p>
<p id="demo2">Click me.</p>

<script>
document.getElementById("demo").onclick = function() {myFunction()};

function myFunction() {
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

</body>
</html>

最后一行代码 $(“#treeGrid”)。jqxTreeGrid('checkRow',2); 是加载时选中复选框true的原因。 如果需要任何帮助,请确认。希望它可以提供帮助。

答案 1 :(得分:1)

要使用checkRow方法检查网格就绪函数上的行,lockRow将禁用行的编辑并为行提供灰色样式。

3或8是唯一ID,用于标识行Id(数据源中的数据字段)。

ready: function () {
    $("#treeGrid").jqxTreeGrid('checkRow', '3');
    $("#treeGrid").jqxTreeGrid('lockRow', '3');

    $("#treeGrid").jqxTreeGrid('checkRow', '8');
    $("#treeGrid").jqxTreeGrid('lockRow', '8');
},

要禁用复选框,您可以使用rowUncheck事件来阻止通过再次检查行取消选中。

$('#treeGrid').on('rowUncheck', function (event) {
    $("#treeGrid").jqxTreeGrid('checkRow', '3');
    $("#treeGrid").jqxTreeGrid('checkRow', '8');
});

$("#treeGrid").jqxTreeGrid({
  // ......
});