簡體   English   中英

jqWidget - 根據數據禁用復選框

[英]jqWidget - disable checkbox based on data

我在我的項目中使用插件jqWidget ,在我的表中,我將“復選框”設置為“選擇模式”。

現在我需要的是何時加載表,根據每行中的數據值禁用/隱藏某些行的復選框,例如,如果名為“disableCheckbox”的值為“true”,則不會顯示該復選框, 如果它是 "false", 復選框將被啟用。

任何幫助是極大的贊賞。

我認為您無法在“復選框”選擇模式下控制默認呈現的復選框的可見性。

我有另一個解決方案,它使用我自己的復選框列{ columntype: 'checkbox' }並在 CSS 的幫助下使用cellclassname屬性控制“復選框”可見性。

希望能幫助到你 !

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM