在此简短提示中,我提供了一些简单的步骤,以使用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();
}
如果您想查看有关网格小部件中选项的更多信息,可以参考文档的这一部分 。
这样就完成了设置,控件可以使用了。
确保单击表/网格中任何内容单元的内部,以查看编辑功能的工作方式。 您可以在Shield UI网站上查看有关Shield UI jQuery Grid组件用法的更多示例。
From: https://www.sitepoint.com/editable-grid-jquery-bootstrap-shield-ui-lite/