如何在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: "[phone]",
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: "[phone]",
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: "[phone]",
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: "[phone]",
hireDate: "07-28-2011",
has401k: false
},
{
id: "2",
legalName: "Fonda, Jane",
agencyName: "Social Services",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "[phone]",
hireDate: "06-14-2021",
has401k: true
},
{
id: "2",
legalName: "Bauer, Jack",
agencyName: "National Defense",
agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
phone: "[phone]",
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

希望我还能及时帮你一把。

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

在jqxGrid API参考中，尝试搜索"columns"并查看cellbeginedit属性。

cellbeginedit-设置一个自定义函数，当单元格进入编辑模式。网格将3个参数传递给它——行索引，列数据字段和列类型。该功能可用于取消对特定网格单元的编辑。为了取消编辑，函数应该返回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: "[phone]",
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: "[phone]",
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: "[phone]",
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: "[phone]",
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: "[phone]",
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: "[phone]",
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>