jqWidget - 根据数据禁用复选框

Question

我为我的项目使用插件jqWidget，对于我的表，我将“复选框”设置为“选择模式”。

现在我需要的是何时加载表，根据每行中的数据值禁用/隐藏某些行的复选框，例如，如果名为“disableCheckbox”的值为“true”，则不会显示该复选框, 如果它是 "false", 复选框将被启用。

任何帮助是极大的赞赏。

Answer 1

我认为您无法在“复选框”选择模式下控制默认呈现的复选框的可见性。

我有另一个解决方案，它使用我自己的复选框列 { columntype: 'checkbox' } 并使用控制“复选框”可见性单元类名属性在 CSS 的帮助下。

希望能帮助到你 ！

PS：我有一个开源库，它提供了一些有用的，日常使用的方法和功能，以便每次重新编码这些功能，我也将它用于我公司的项目，请随时参考它，EnhanceDataGrid.js

$(document).ready(function() {
  var data = [{
      id: "1",
      legalName: "Agrawal, Parag",
      agencyName: "Social Services",
      agencyAddress: "Market Square, 1355 Market St<br>#900<br>San Francisco, CA 94103",
      phone: "(415) 222-9670",
      hireDate: "04-3-2022",
      has401k: true,
      disableCheckbox: true
    },
    {
      id: "2",
      legalName: "Zuckerberg, Mark",
      agencyName: "Defense Advocates Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "01-30-2019",
      has401k: true,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Walker, Johnny",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 329-0124",
      hireDate: "10-03-2016",
      has401k: false,
      disableCheckbox: true
    },
    {
      id: "2",
      legalName: "Daniels, Jack",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 856-5309",
      hireDate: "07-28-2011",
      has401k: false,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Fonda, Jane",
      agencyName: "Social Services",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "06-14-2021",
      has401k: true,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Bauer, Jack",
      agencyName: "National Defense",
      agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
      phone: "(123) 242-4242",
      hireDate: "11-10-2008",
      has401k: false,
      disableCheckbox: false
    }
  ];

  // prepare the data
  var source = {
    datatype: "json",
    datafields: [{
        name: "legalName"
      },
      {
        name: "agencyName"
      },
      {
        name: "agencyAddress"
      },
      {
        name: "phone"
      },
      {
        name: "hireDate",
        type: "date"
      },
      {
        name: "has401k",
        type: "bool"
      },
      {
        name: "lock",
        type: "number"
      },
      {
        name: "cbx",
        type: "boolean"
      },
      {
        name: "disableCheckbox",
        type: "boolean"
      }
    ],
    localdata: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  var source = {
    localdata: data,
    datatype: "array",
  };

  $("#jqxgrid").jqxGrid({
    source: dataAdapter,
    theme: "energyblue",
    width: "98%",
    height: "630px",
    autoheight: true,
    autorowheight: true,
    editable: true,
    columns: [{
        text: 'Checkbox', 
        width: "100", 
        menu: false, 
        datafield: 'cbx',
        columntype: "checkbox",
        cellclassname: function (row, column, value, data) {
          if (data.disableCheckbox) {
            return "hideCheckbox";
          }
        }
      },
      {
        text: "Legal Name",
        datafield: "legalName",
        width: "20%",
        editable: false
      },
      {
        text: "Agency Name",
        datafield: "agencyName",
        filtertype: "checkedlist",
        width: "20%",
        editable: false
      },
      {
        text: "Agency Address",
        datafield: "agencyAddress",
        width: "20%",
        editable: false
      },
      {
        text: "Hire Date",
        datafield: "hireDate",
        cellsformat: "d",
        filtertype: "range",
        width: "10%",
        editable: false
      }
    ]
  });
});

.hideCheckbox * {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/>

<div id="jqxgrid"></div>