Как я могу поставить галочку и отключить в jqxTreeGrid

Question

Я пытаюсь сделать некоторые флажки отмечены и отключены в 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. Но не получил никакого решения или подсказок. Пожалуйста, помогите мне кто-нибудь.

Answer 1

Для проверки строк на сетке используйте функцию checkRow метод и lockRow отключит редактирование строки и придаст строке серый стиль.

3 или 8 - Уникальный идентификатор, который идентифицирует идентификатор строки (поле данных в источнике данных).

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({
  // ......
});

Answer 2

Вы должны внести изменения ниже, а также просто поставить атрибут id для каждого из данных вашего столбца. Затем поставьте флажок для выбора флажка, чтобы установить true.

перейдите по этой ссылке, у меня есть скрипка для вас Вызовите метод uncheckRow.

   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 во время загрузки. Пожалуйста, убедитесь, что любая помощь требуется. Надеюсь, что это может помочь.