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

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

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

钥匙要点

• > Shield UI Lite是一个开源jQuery库，其中包括jQuery网格，支持编辑，分类，分组和不同的列编辑器。该网格还支持从本地JSON结构到远程Web服务的所有类型数据的绑定。>
要设置一个可编辑的网格，您需要使用标准的引导程序容器，将引用添加到示例中使用的所有资源，例如样式表，JavaScript文件和数据，然后设置Shield UI Lite网格组件。网格可以使用CSS自定义，并与其他JavaScript库兼容。
• >
可编辑网格可以与数据库一起使用，可以从各种来源加载数据，例如本地数组，JSON文件或远程服务器，并可以将数据导出到各种格式，例如CSV，Excel和PDF。它还支持内置验证功能和错误处理。
• >

关于Shield UI Lite

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

Shield UI Lite Suite是市场上最新的开源库之一，具体的是它包含大量组件，所有这些组件都具有丰富和成熟的功能。这包括jQuery网格，该网格支持所有重要的Web网格操作。该组件支持使用内联或标准编辑形式编辑以及外部形式进行编辑。还支持的是细胞编辑。

除此之外，Shield UI网格还具有内置的数据源组件，该组件有助于与从本地JSON结构到远程Web服务的所有类型数据的绑定；内置数据源还会处理所有删除，更新和插入操作。

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

>

使用代码

对于我们将要创建的可编辑网格，我正在使用本地数据源来保持简单。可以在GitHub上找到库的源代码。完整的示例代码以及所使用的所有示例数据以及Codepen演示中的其他CSS。

设置布局的第一步是使用标准的引导程序容器。在我们的情况下，这是一个div，上面有一个嵌套在里面的bootstrap面板。由于任何标准的Web网格组件通常都托管大量数据，因此我们的布局涵盖了屏幕的全宽度。

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

>

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

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

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

包括这些资源的包含：

>

CSS：

脚本：

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

设置网格

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

>该过程的下一步是设置Shield UI Lite网格组件。一旦包含了必要的资源，我们就可以在文档中使用一些JavaScript初始化它。

>描述组件有两个逻辑部分。第一个是处理将在网格中可视化的数据的数据源，而另一个正在设置列，这些列实际上将被渲染，以及任何其他设置，例如排序，悬停效果等。

> Shield UI Lite Grid具有内置的数据源属性，这使得将小部件绑定到任何数据 - 本地或远程数据。为了将数据源链接到JSON数据，我们使用数据属性并描述将获取的字段。

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

启用编辑

在设置应用程序的过程中的下一步是选择在网格中可用的属性以及描述将渲染的列。

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

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

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

>

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

设置自定义编辑器

小部件支持许多方便的编辑器。将控件放入编辑模式后，单击任何单元格，单元格的编辑器将取决于该单元格中值的类型。例如，数字值将具有增量和减少按钮的数字输入。日期列将有一个日历输入，以便轻松选择日期。

>

也可以选择为列提供自定义编辑器。例如，我们可以使用该列的所有值。

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

>在以下代码段中为事件进行了证明：

>

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

和自定义编辑器：

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

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

这完成了我们的设置，并且控件已准备就绪。

>

在Codepen上查看完整的工作演示

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

经常询问的问题（常见问题解答）关于用jQuery和bootstrap

>如何自定义可编辑网格的外观？您可以修改网格的颜色，字体，边框和其他视觉元素，以匹配您网站的设计。您还可以使用Bootstrap的内置类来快速造型网格。对于更高级的自定义，您可以使用Shield UI Lite的API，该API提供了多种选择用于修改网格的外观和行为。

>

>我可以将可编辑的网格与其他JavaScript库一起使用吗？是的，可编辑的网格与其他JavaScript库（例如AngularJs，react和vue.js.s.）兼容。您可以使用这些库来增强网格的功能，例如添加动态数据加载，排序和过滤功能。

>

如何在编辑网格中添加或删除行？您可以使用网格的API在可编辑网格中添加或删除行。 API提供了添加新行，删除现有行以及更新网格中数据的方法。您也可以使用API​​编程选择行，这对于实现批量编辑或删除功能可能很有用。

>如何在可编辑网格中验证用户输入？

>您可以使用Shield UI Lite的内置验证功能在可编辑网格中验证用户输入。该库提供了各种验证规则，例如所需字段，数字范围和电子邮件格式。您还可以创建自定义验证规则来处理更复杂的验证方案。

>我可以从可编辑网格中导出数据吗？

是的，您可以将数据从可编辑网格导出到各种格式。例如CSV，Excel和PDF。这可以使用网格的API完成，该API提供了导出网格数据的方法。您还可以自定义导出的数据，例如包括或排除某些列，或以特定方式格式化数据。

>

>如何将数据加载到可编辑的网格中？从各种来源（例如本地数组，JSON文件或远程服务器）中数据数据到可编辑的网格。网格的API提供了加载数据的方法，您可以将这些方法与Ajax结合使用来从服务器加载数据。

>

>我可以在移动应用程序中使用可编辑的网格吗？ ，可编辑的网格响应迅速，可用于移动应用程序。网格的布局将自动调整以适合屏幕尺寸，并且您还可以使用CSS媒体查询在不同设备上自定义网格的行为。

>我如何在编辑网格中对数据进行排序和过滤数据？ 🎜>您可以使用网格的API在可编辑的网格中进行分类和过滤数据。 API提供了通过一个或多个列对数据进行分类的方法，以及根据各种标准过滤数据的方法。您也可以将这些方法与AJAX结合使用来实现服务器端分类和过滤。

我可以使用数据库使用可编辑的网格吗？

是的，您可以将可编辑的网格与数据库。您可以将数据库从数据库加载到网格中，还可以通过网格中的更改来更新数据库。可以使用AJAX与服务器端语言（例如PHP，ASP.NET或Node.js.s.js.s.

）组合完成此操作。可以使用Shield UI Lite的内置错误处理功能来处理可编辑网格中的错误。该库提供了显示错误消息，突出显示无效字段并防止无效数据保存的方法。您还可以自定义错误处理行为以适合您的需求。

以上是带有jQuery，Bootstrap和Shield UI Lite的可编辑网格的详细内容。更多信息请关注PHP中文网其他相关文章！