如何在 jqxTreeGrid 中选中复选框并禁用答案

【问题标题】：How can I check checkboxes and disabled in jqxTreeGrid如何在 jqxTreeGrid 中选中复选框并禁用
【发布时间】：2018-04-26 11:32:14
【问题描述】：

我正在尝试在下面的代码中检查和禁用 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 做了一些研究。但没有得到任何解决方案或线索。请任何人帮助我。

【问题讨论】：

标签： jqwidget jqxtreegrid

【解决方案1】：

您需要进行以下更改，也只需为每个列数据放置 id 属性。然后将用于选择复选框的 id 设置为 true。

点击此链接，我为您准备了一把小提琴Invoke the uncheckRow method.

   var data = [{
      "id": "1",
      "name": "Corporate Headquarters",
      "budget": "1230000",
      "location": "Las Vegas",
          "children": [{
          "id": "2",
          "name": "Finance Division",
          "budget": "423000",
          "location": "San Antonio",
              "children": [{
              "id": "3",
              "name": "Accounting Department",
              "budget": "113000",
              "location": "San Antonio"
          }, {
              "id": "4",
              "name": "Investment Department",
              "budget": "310000",
              "location": "San Antonio",
              children: [{
                  "id": "5",
                  "name": "Banking Office",
                  "budget": "240000",
                  "location": "San Antonio"
              }, {
                  "id": "6",
                  "name": "Bonds Office",
                  "budget": "70000",
                  "location": "San Antonio"
              }, ]
          }]
      }, {
          "id": "7",
          "name": "Operations Division",
          "budget": "600000",
          "location": "Miami",
              "children": [{
              "id": "8",
              "name": "Manufacturing Department",
              "budget": "300000",
              "location": "Miami"
          }, {
              "id": "9",
              "name": "Public Relations Department",
              "budget": "200000",
              "location": "Miami"
          }, {
              "id": "10",
              "name": "Sales Department",
              "budget": "100000",
              "location": "Miami"
          }]
      }, {
          "id": "11",
          "name": "Research Division",
          "budget": "200000",
          "location": "Boston"
      }]
  }];

  var source = {
      dataType: "json",
      dataFields: [{
          name: "name",
          type: "string"
      }, {
          name: "budget",
          type: "number"
      }, {
          name: "id",
          type: "number"
      }, {
          name: "children",
          type: "array"
      }, {
          name: "location",
          type: "string"
      }],
      hierarchy: {
          root: "children"
      },
      localData: data,
      id: "id"
  };

  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function () {

      }
  });
  // create jqxTreeGrid.
  $("#treeGrid").jqxTreeGrid({
      source: dataAdapter,
      altRows: true,
      width: 680,
      theme:'energyblue',
      checkboxes: true,
      ready: function () {
          $("#treeGrid").jqxTreeGrid('expandRow', '1');
          $("#treeGrid").jqxTreeGrid('expandRow', '2');
      },
      columns: [{
          text: "Name",
          align: "center",
          dataField: "name",
          width: 300
      }, {
          text: "Budget",
          cellsAlign: "center",
          align: "center",
          dataField: "budget",
          cellsFormat: "c2",
          width: 250
      }, {
          text: "Location",
          dataField: "location",
          cellsAlign: "center",
          align: "center"
      }]
        });
  $("#jqxbutton").jqxButton({
      theme: 'energyblue',
      height: 30
  });
 $("#treeGrid").jqxTreeGrid('checkRow',2);

最后一行代码 $("#treeGrid").jqxTreeGrid('checkRow',2); 是在加载时选中复选框 true 的原因。请确保是否需要任何帮助。希望它可以帮助。

【讨论】：

【解决方案2】：

要检查网格就绪函数上的行，请使用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({
  // ......
});

【讨论】：