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

In this short tip, I provide a few easy steps to set up an editable grid (or table) using Bootstrap and Shield UI Lite.

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

Shield UI Lite is an open source jQuery library that includes, among other components, a jQuery grid. The grid supports editing out-of-the-box, as well as sorting, grouping, and different column editors.

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

关于Shield UI Lite (About Shield UI Lite)

Shield UI is a web component development company that specializes in the design, development, and marketing of UI widgets for pure JavaScript development, as well as for development in ASP.NET, ASP.NET MVC, and Java Wicket. The company offers Data Visualization components, as well as a whole array of standard web development components, such as grids, barcodes – one and two dimensional, extended input components – such as numeric and masked textboxes, and many more.

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

The Shield UI Lite Suite is one of the newest open source libraries on the market and what is specific about it is that it contains a wealth of components, all of which are feature rich and mature. This includes the jQuery Grid, which supports all important web grid operations out-of-the-box. The component supports editing with either inline or standard edit form editing, as well as editing with an external form. Also supported is cell editing.

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

In addition to this, the Shield UI Grid has a built-in datasource component, which facilitates the binding to all types of data – from local JSON structures, to remote web services; the built-in DataSource also takes care of all delete, update and insert operations.

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

For data-heavy applications, the Shield UI jQuery widget offers an enhanced virtual scrolling feature significantly improves performance, even when working with millions of real data records. To see more examples of the component and its options, you can refer to the online demos or the documentation.

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

使用代码 (Using the Code)

For the editable grid that we’ll be creating, I’m using a local data source in order to keep things simple. The source code for the libraries can be found on GitHub. The full sample code, along with all sample data used, as well as additional CSS is available in the CodePen demo.

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

The first step in setting up the layout is to use a standard Bootstrap container. In our case, this is a div with a Bootstrap panel nested inside. Since any standard web grid component usually hosts a lot of data, our layout spans the full width of the screen.

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

The code for this step is straightforward and looks like this:

此步骤的代码很简单，看起来像这样：

<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>

This is all the HTML needed to set up the sample. The next step is adding references to all the resources used in the sample, such as stylesheets, JavaScript files, and data.

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

The data used for the example is a standard JSON collection, which is loaded separately in order to be passed to the grid component. Using a local data source simplifies the setup. Additionally we need the stylesheet for the grid and the JavaScript for initializing it.

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

The inclusion of these resources is demonstrated below:

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

The CSS:

CSS：

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

The scripts:

脚本：

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

设置网格 (Setting up the Grid)

The next step in the process is setting up the Shield UI Lite grid component. Once we have included the necessary resources, we can initialize it with some JavaScript in the document.ready handler.

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

There are two logical parts in describing the component. The first is handling the datasource for the data that will be visualized in the grid, and the other one is setting up the columns, which will be actually rendered, as well as any additional settings, such as sorting, hover effects, etc.

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

The Shield UI Lite Grid has a built-in dataSource property, which makes it easy to bind the widget to any data – local or remote. To link the dataSource to the JSON data, we use the data property and describe the fields, which will be fetched.

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

The code to achieve this is shown below:

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

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 }
    }
  }
}

启用编辑 (Enabling Editing)

The next step in the process of setting up the application is choosing which properties will be available in the grid, as well as describing the columns, which will be rendered.

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

Each column can have additional properties, such as header text and width. The width property setting is not obligatory, but provides additional flexibility for distributing the overall layout.

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

The code for all the properties in the control is listed below:

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

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
      }
    }
  }
},

设置自定义编辑器 (Setting Up a Custom Editor)

The widget supports a number of handy editors out of the box. Once the control is put into edit mode, by clicking on any of the cells, the editor for the cell will be dependent on the type of values in this cell. For example, a numeric value will have a numeric input with increment and decrement buttons. A date column will have a Calendar input for easily picking a date.

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

There is also the option of supplying a custom editor for a column. For example, instead of having a standard textbox, we can have a dropdown with all the values for that column.

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

This can be achieved by attaching to the getCustomEditorValue event and passing a custom editor for each cell.

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

This is demonstrated in the following code snippet for the events:

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

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

And the custom editor:

和自定义编辑器：

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

If you would like to review more information on the options in the grid widget, you can refer to this section of the documentation.

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

This completes our setup and the control is ready to use.

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

View the full working demo on CodePen

查看CodePen上的完整工作演示

Be sure to click inside any of the content cells in the table/grid to see how the edit functionality works. You can view more examples on the usage of the Shield UI jQuery Grid component on the Shield UI website.

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

翻译自: https://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite/