具有jQuery，Bootstrap和Shield UI Lite的可编辑网格

在此简短提示中，我提供了一些简单的步骤，以使用Bootstrap和Shield UI Lite设置可编辑的网格（或表）。

Shield UI Lite是一个开源jQuery库，除其他组件外，还包括jQuery网格。 网格支持开箱即用的编辑，以及排序，分组和不同的列编辑器。

关于Shield UI Lite

Shield UI是一家Web组件开发公司，专门从事UI小部件的设计，开发和营销，以用于纯JavaScript开发以及ASP.NET，ASP.NET MVC和Java Wicket的开发。 该公司提供数据可视化组件以及一系列标准的Web开发组件，例如网格，条形码（一维和二维），扩展的输入组件（例如数字和掩码文本框） 等等 。

Shield UI Lite Suite是市场上最新的开放源代码库之一，其具体之处在于它包含许多组件，所有这些组件都具有丰富而成熟的功能。 这包括jQuery Grid ，它开箱即用地支持所有重要的Web网格操作。 该组件支持使用内联或标准编辑表单编辑进行编辑，以及使用外部表单进行编辑。 还支持单元格编辑。

除此之外，Shield UI Grid还具有内置的数据源组件，该组件便于绑定到所有类型的数据-从本地JSON结构到远程Web服务。 内置的数据源还负责所有删除，更新和插入操作。

对于数据繁多的应用程序，Shield UI jQuery小部件提供了增强的虚拟滚动功能，即使在处理数百万个真实数据记录时也可以显着提高性能。 要查看该组件及其选项的更多示例，可以参考在线演示或文档 。

使用代码

对于我们将要创建的可编辑网格，我正在使用本地数据源，以使事情变得简单。 这些库的源代码可以在GitHub上找到 。 完整的示例代码以及所有使用的示例数据以及其他CSS可在CodePen演示中获得 。

设置布局的第一步是使用标准的Bootstrap容器。 在我们的情况下，这是一个内部嵌套有Bootstrap面板的div 。 由于任何标准的Web网格组件通常都承载大量数据，因此我们的布局跨越了屏幕的整个宽度。

此步骤的代码非常简单，如下所示：

<div class="col-md-12">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="text-center">Bootstrap Editable jQuery Grid
      <span class="fa fa-edit pull-right bigicon"></span></h4>
    </div>
    <div class="panel-body text-center">
      <div id="grid"></div>
    </div>
  </div>
</div>

这就是设置示例所需的所有HTML。 下一步是添加对示例中使用的所有资源的引用，例如样式表，JavaScript文件和数据。

该示例使用的数据是标准的JSON集合，该集合将单独加载以传递到网格组件。 使用本地数据源可简化设置。 另外，我们需要用于网格的样式表和用于初始化它的JavaScript。

这些资源的包含情况如下所示：

CSS：

<link rel="stylesheet" href="shieldui-lite.min.css">

脚本：

<script src="shieldui-lite-all.min.js"></script>
<script src="shortGridData.js"></script>

设置网格

该过程的下一步是设置Shield UI Lite网格组件。 一旦包含了必要的资源，就可以在document.ready处理程序中使用一些JavaScript对其进行初始化。

描述组件时有两个逻辑部分。 第一个是处理将在网格中可视化的数据的数据源，另一个是设置将实际呈现的列以及任何其他设置（例如排序，悬停效果等）。

Shield UI Lite Grid具有内置的dataSource属性，可轻松将窗口小部件绑定到本地或远程的任何数据。 要将dataSource链接到JSON数据，我们使用data属性并描述将要获取的字段。

实现此目的的代码如下所示：

dataSource: {
  data: gridData,
  schema: {
    fields: {
      id: { path: "id", type: Number },
      age: { path: "age", type: Number },
      name: { path: "name", type: String },
      company: { path: "company", type: String },
      month: { path: "month", type: Date },
      isActive: { path: "isActive", type: Boolean },
      email: { path: "email", type: String },
      transport: { path: "transport", type: String }
    }
  }
}

启用编辑

设置应用程序过程的下一步是选择哪些属性在网格中可用，以及描述将要呈现的列。

每列可以具有其他属性，例如标题文本和宽度。 width属性设置不是强制性的，但为分发整体布局提供了额外的灵活性。

下面列出了控件中所有属性的代码：

rowHover: false,
columns: [
  { field: "name", title: "Person Name", width: "120px" },
  { field: "age", title: "Age", width:"80px" },
  { field: "company", title: "Company Name" },
  { field: "month", title: "Date of Birth", 
  format: "{0:MM/dd/yyyy}", width:"120px" },
  { field: "isActive", title: "Active" },
  { field: "email", title: "Email Address", width: "250px" },
  { field: "transport", title: "Custom Editor", width: "120px", editor: myCustomEditor },
  {
    width: "104px",
    title: "Delete Column",
    buttons: [
      { cls: "deleteButton", commandName: "delete", 
        caption: "<img src='source/delete.png' />
        <span>Delete</span>" }
    ]
  }
],
editing: {
  enabled: true,
  event: "click",
  type: "cell",
  confirmation: {
    "delete": {
      enabled: true,
      template: function (item) {
        return "Delete row with ID = " + item.id
      }
    }
  }
},

设置自定义编辑器

该小部件支持许多方便的开箱即用的编辑器。 控件进入编辑模式后，通过单击任意单元格，该单元格的编辑器将取决于此单元格中值的类型。 例如，一个数字值将带有一个带有增量和减量按钮的数字输入。 日期列将具有“日历”输入，可轻松选择日期。

还可以选择为列提供自定义编辑器。 例如，我们可以使用一个包含该列所有值的下拉列表，而不是使用标准文本框。

这可以通过附加到getCustomEditorValue事件并为每个单元格传递自定义编辑器来实现。

下面的事件代码段对此进行了演示：

events: {
  getCustomEditorValue: function (e) {
    e.value = $("#dropdown").swidget().value();
    $("#dropdown").swidget().destroy();
  }
}

和自定义编辑器：

function myCustomEditor(cell, item) {
  $('<div id="dropdown"/>')
  .appendTo(cell)
  .shieldDropDown({
    dataSource: {
      data: ["motorbike", "car", "truck"]
    },
    value: !item["transport"] ? null : item["transport"].toString()
  }).swidget().focus();
}

如果您想查看有关网格小部件中选项的更多信息，可以参考文档的这一部分 。

这样就完成了设置，控件可以使用了。

查看CodePen上的完整工作演示

确保单击表/网格中任何内容单元的内部，以查看编辑功能的工作方式。 您可以在Shield UI网站上查看有关Shield UI jQuery Grid组件用法的更多示例。

From: https://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite/