如何添加新行并使其在 jQWidgets 中可编辑？

Question

我有一个场景，我需要向网格添加一个新行，并将其留空，但可编辑。 我取得了一些成就，但这并不是我想要的。 在示例中，我提供了正在发生的事情的片段。

我可以添加新行，但所有行都是可编辑的。 我只希望新行是可编辑的。

我怎样才能做到这一点？

 $(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 }, { 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 }, { 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 }, { 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 }, { 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 }, { 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 } ]; // prepare the data var source = { datatype: "json", datafields: [{ name: "legalName" }, { name: "agencyName" }, { name: "agencyAddress" }, { name: "phone" }, { name: "hireDate", type: "date" }, { name: "has401k", type: "bool" } ], localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); var source = { localdata: data, datatype: "array", loadComplete: function(data) {}, loadError: function(xhr, status, error) {} }; $("#jqxgrid").jqxGrid({ source: dataAdapter, sortable: true, theme: "energyblue", width: "98%", height: "630px", pageable: false, columnsresize: true, selectionMode: "none", filterable: true, showfilterrow: true, autoheight: true, autorowheight: true, groupable: true, editable: true, columns: [{ text: "Legal Name", datafield: "legalName", width: "20%" }, { text: "Agency Name", datafield: "agencyName", filtertype: "checkedlist", width: "20%" }, { text: "Agency Address", datafield: "agencyAddress", width: "20%" }, { text: "Phone", datafield: "phone", width: "20%" }, { text: "Hire Date", datafield: "hireDate", cellsformat: "d", filtertype: "range", width: "10%" }, { text: "Has 401K", datafield: "has401k", width: "10%", columntype: "checkbox", filtertype: "checkedlist" } ] }); // $("#jqxgrid").jqxGrid('hidecolumn', 'legalName'); }); $("#addrowbutton").jqxButton({ theme: "energyblue", height: 30 }); $("#addrowbutton").on("click", function() { var commit = $("#jqxgrid").jqxGrid("addrow", null, { editable: true }); });

 <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="jqxWidget"> <header> <h2 class="text-center">Example: How to change <code>something here</code></h2> </header> <div id="jqxgrid" class="auto-margin"></div> </div> <p class="notice"><strong>*All data is test data only.</strong></p> <div style="margin-top: 10px;"> <input id="addrowbutton" type="button" value="Add Row" /> </div>

Answer 1

希望我还能及时帮助你。

您可以使用' columns '的' cellbeginedit '属性，如editableNewRow （）function所示，并添加一个新的字段锁来控制可编辑性（您可以使用任何条件，只要它适合您的编辑锁定目的，我在这里演示使用锁定字段）。

在 jqxGrid API Reference中，尝试搜索“列”并查看cellbeginedit属性。

cellbeginedit - 设置自定义 function，当单元格进入编辑模式时调用。 Grid 将 3 个参数传递给它 - 行索引、列数据字段和列类型。 function 可用于取消对特定 Grid 单元格的编辑。 要取消编辑，function 应返回 false。

希望能帮助到你 ！

 $(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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 } ]; // 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" } ], localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); var source = { localdata: data, datatype: "array", loadComplete: function(data) {}, loadError: function(xhr, status, error) {} }; var editableNewRow = function(row, datafield, columntype) { var rowData = $("#jqxgrid").jqxGrid('getrowdata', row); // return false to cancel edit as documented in columns > cellbeginedit return rowData.lock > 0? false: true; }; $("#jqxgrid").jqxGrid({ source: dataAdapter, sortable: true, theme: "energyblue", width: "98%", height: "630px", pageable: false, columnsresize: true, selectionMode: "none", filterable: true, showfilterrow: true, autoheight: true, autorowheight: true, groupable: true, editable: true, columns: [{ text: "Legal Name", datafield: "legalName", width: "20%", cellbeginedit: editableNewRow }, { text: "Agency Name", datafield: "agencyName", filtertype: "checkedlist", width: "20%", cellbeginedit: editableNewRow }, { text: "Agency Address", datafield: "agencyAddress", width: "20%", cellbeginedit: editableNewRow }, { text: "Phone", datafield: "phone", width: "20%", cellbeginedit: editableNewRow }, { text: "Hire Date", datafield: "hireDate", cellsformat: "d", filtertype: "range", width: "10%", cellbeginedit: editableNewRow }, { text: "Has 401K", datafield: "has401k", width: "10%", columntype: "checkbox", filtertype: "checkedlist", cellbeginedit: editableNewRow } ] }); // $("#jqxgrid").jqxGrid('hidecolumn', 'legalName'); }); $("#addrowbutton").jqxButton({ theme: "energyblue", height: 30 }); $("#addrowbutton").on("click", function() { var commit = $("#jqxgrid").jqxGrid("addrow", null, { editable: true }); });

 <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="jqxWidget"> <header> <h2 class="text-center">Example: How to change <code>something here</code></h2> </header> <div id="jqxgrid" class="auto-margin"></div> </div> <p class="notice"><strong>*All data is test data only.</strong></p> <div style="margin-top: 10px;"> <input id="addrowbutton" type="button" value="Add Row" /> </div>