如何在jQWidgets网格中添加可编辑新行且仅新行可编辑

要实现仅新增行可编辑，核心思路是全局关闭网格编辑权限，通过行级标记控制仅新增行允许编辑，具体修改如下：

关键改动点 #

1. 关闭全局编辑，添加行级可编辑标记

   • 将网格的editable设置为false，默认所有行不可编辑
   • 在数据源的datafields中新增isEditable字段，用于标记该行是否允许编辑，原有数据的该字段设为false

2. 通过cellbeginedit事件控制编辑权限

   • 监听网格的cellbeginedit事件，判断当前行的isEditable值，若为false则取消编辑操作

3. 修改新增行逻辑

   • 新增行时设置isEditable: true，并初始化空值，确保该行可编辑

修改后的完整代码 #

JavaScript部分 #

$(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,
      isEditable: false // 原有行标记为不可编辑
    },
    {
      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,
      isEditable: false
    },
    {
      id: "3",
      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,
      isEditable: false
    },
    {
      id: "4",
      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,
      isEditable: false
    },
    {
      id: "5",
      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,
      isEditable: false
    },
    {
      id: "6",
      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,
      isEditable: false
    }
  ];

  // 准备数据源，添加isEditable字段
  var source = {
    datatype: "json",
    datafields: [{
        name: "legalName"
      },
      {
        name: "agencyName"
      },
      {
        name: "agencyAddress"
      },
      {
        name: "phone"
      },
      {
        name: "hireDate",
        type: "date"
      },
      {
        name: "has401k",
        type: "bool"
      },
      {
        name: "isEditable",
        type: "bool" // 新增可编辑标记字段
      }
    ],
    localdata: data
  };

  var dataAdapter = new $.jqx.dataAdapter(source);

  $("#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: false, // 全局关闭编辑
    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"
      }
    ],
    // 监听单元格开始编辑事件，控制权限
    cellbeginedit: function (row, column, editor) {
      var rowData = $("#jqxgrid").jqxGrid('getrowdata', row);
      // 如果当前行不可编辑，取消编辑操作
      if (!rowData.isEditable) {
        return false;
      }
    }
  });
});

$("#addrowbutton").jqxButton({
  theme: "energyblue",
  height: 30
});

$("#addrowbutton").on("click", function() {
  // 新增空行，标记为可编辑
  var commit = $("#jqxgrid").jqxGrid("addrow", null, {
    legalName: "",
    agencyName: "",
    agencyAddress: "",
    phone: "",
    hireDate: null,
    has401k: false,
    isEditable: true // 新增行标记为可编辑
  });
});

HTML部分 #

<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: 仅新增行可编辑</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>

说明 #

• 原有数据通过isEditable: false标记为不可编辑，点击这些行的单元格不会触发编辑
• 点击"Add Row"按钮新增的行带有isEditable: true标记，允许编辑所有单元格
• cellbeginedit事件是jQWidgets提供的编辑拦截点，返回false即可取消当前单元格的编辑操作

内容的提问来源于stack exchange，提问作者Millhorn