在這個(gè)簡短的提示中，我提供了一些簡單的步驟來使用Bootstrap和Shield UI Lite設(shè)置可編輯的網(wǎng)格（或表格）。

> Shield UI Lite是一個(gè)開源jQuery庫，其中包括其他組件，包括jQuery網(wǎng)格。網(wǎng)格支持開箱即用的編輯以及分類，分組和不同的列編輯器。

鑰匙要點(diǎn)

• > Shield UI Lite是一個(gè)開源jQuery庫，其中包括jQuery網(wǎng)格，支持編輯，分類，分組和不同的列編輯器。該網(wǎng)格還支持從本地JSON結(jié)構(gòu)到遠(yuǎn)程Web服務(wù)的所有類型數(shù)據(jù)的綁定。 >
要設(shè)置一個(gè)可編輯的網(wǎng)格，您需要使用標(biāo)準(zhǔn)的引導(dǎo)程序容器，將引用添加到示例中使用的所有資源，例如樣式表，JavaScript文件和數(shù)據(jù)，然後設(shè)置Shield UI Lite網(wǎng)格組件。網(wǎng)格可以使用CSS自定義，並與其他JavaScript庫兼容。
• >
可編輯網(wǎng)格可以與數(shù)據(jù)庫一起使用，可以從各種來源加載數(shù)據(jù)，例如本地?cái)?shù)組，JSON文件或遠(yuǎn)程服務(wù)器，並可以將數(shù)據(jù)導(dǎo)出到各種格式，例如CSV，Excel和PDF。它還支持內(nèi)置驗(yàn)證功能和錯(cuò)誤處理。
• >

關(guān)於Shield UI Lite

Shield UI是一家Web組件開發(fā)公司，專門研究用於純JavaScript開發(fā)的UI小部件的設(shè)計(jì)，開發(fā)和營銷，以及ASP.NET，ASP.NET MVC和Java Wicket的開發(fā)。該公司提供數(shù)據(jù)可視化組件，以及一系列標(biāo)準(zhǔn)的Web開發(fā)組件，例如網(wǎng)格，條形碼 - 一維和二維輸入組件，例如數(shù)字和蒙版的文本框等。

Shield UI Lite Suite是市場上最新的開源庫之一，具體的是它包含大量組件，所有這些組件都具有豐富和成熟的功能。這包括jQuery網(wǎng)格，該網(wǎng)格支持所有重要的Web網(wǎng)格操作。該組件支持使用內(nèi)聯(lián)或標(biāo)準(zhǔn)編輯形式編輯以及外部形式進(jìn)行編輯。還支持的是細(xì)胞編輯。

除此之外，Shield UI網(wǎng)格還具有內(nèi)置的數(shù)據(jù)源組件，該組件有助於與從本地JSON結(jié)構(gòu)到遠(yuǎn)程Web服務(wù)的所有類型數(shù)據(jù)的綁定；內(nèi)置數(shù)據(jù)源還會(huì)處理所有刪除，更新和插入操作。

>對(duì)於數(shù)據(jù)繁多的應(yīng)用程序，Shield UI JQuery Widget提供了增強(qiáng)的虛擬滾動(dòng)功能，即使使用數(shù)百萬個(gè)真實(shí)的數(shù)據(jù)記錄，也可以顯著提高性能。要查看組件及其選項(xiàng)的更多示例，您可以參考在線演示或文檔。

>

使用代碼

對(duì)於我們將要?jiǎng)?chuàng)建的可編輯網(wǎng)格，我正在使用本地?cái)?shù)據(jù)源來保持簡單?？梢栽贕itHub上找到庫的源代碼。完整的示例代碼以及所使用的所有示例數(shù)據(jù)以及Codepen演示中的其他CSS。

設(shè)置佈局的第一步是使用標(biāo)準(zhǔn)的引導(dǎo)程序容器。在我們的情況下，這是一個(gè)div，上面有一個(gè)嵌套在裡面的bootstrap面板。由於任何標(biāo)準(zhǔn)的Web網(wǎng)格組件通常都託管大量數(shù)據(jù)，因此我們的佈局涵蓋了屏幕的全寬度。

此步驟的代碼很簡單，看起來像這樣：

>

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

這是設(shè)置樣本所需的HTML。下一步是將引用添加到樣本中使用的所有資源，例如樣式表，JavaScript文件和數(shù)據(jù)。

該示例使用的數(shù)據(jù)是標(biāo)準(zhǔn)JSON集合，該集合分別加載以傳遞到網(wǎng)格組件。使用本地?cái)?shù)據(jù)源簡化了設(shè)置。此外，我們需要網(wǎng)格和JavaScript的樣式表來初始化它。

包括這些資源的包含：

>

CSS：

腳本：

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

設(shè)置網(wǎng)格

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

>該過程的下一步是設(shè)置Shield UI Lite網(wǎng)格組件。一旦包含了必要的資源，我們就可以在文檔中使用一些JavaScript初始化它。

>描述組件有兩個(gè)邏輯部分。第一個(gè)是處理將在網(wǎng)格中可視化的數(shù)據(jù)的數(shù)據(jù)源，而另一個(gè)正在設(shè)置列，這些列實(shí)際上將被渲染，以及任何其他設(shè)置，例如排序，懸停效果等。

> Shield UI Lite Grid具有內(nèi)置的數(shù)據(jù)源屬性，這使得將小部件綁定到任何數(shù)據(jù) - 本地或遠(yuǎn)程數(shù)據(jù)。為了將數(shù)據(jù)源鏈接到JSON數(shù)據(jù)，我們使用數(shù)據(jù)屬性並描述將獲取的字段。

實(shí)現(xiàn)此目的的代碼如下所示：

啟用編輯

在設(shè)置應(yīng)用程序的過程中的下一步是選擇在網(wǎng)格中可用的屬性以及描述將渲染的列。

每列可以具有其他屬性，例如標(biāo)題文本和寬度。寬度屬性設(shè)置不是強(qiáng)制性的，而是為分發(fā)整體佈局提供了額外的靈活性。

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

設(shè)置自定義編輯器

小部件支持許多方便的編輯器。將控件放入編輯模式後，單擊任何單元格，單元格的編輯器將取決於該單元格中值的類型。例如，數(shù)字值將具有增量和減少按鈕的數(shù)字輸入。日期列將有一個(gè)日曆輸入，以便輕鬆選擇日期。

>

也可以選擇為列提供自定義編輯器。例如，我們可以使用該列的所有值。

這可以通過附加到getCustomEditorValue事件並傳遞每個(gè)單元格的自定義編輯器來實(shí)現(xiàn)。

>在以下代碼段中為事件進(jìn)行了證明：

>

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

和自定義編輯器：

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

如果您想查看有關(guān)網(wǎng)格小部件中選項(xiàng)的更多信息，則可以參考文檔的這一部分。

這完成了我們的設(shè)置，並且控件已準(zhǔn)備就緒。

>

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

>一定要單擊表/網(wǎng)格中的任何內(nèi)容單元格內(nèi)部，以查看編輯功能的工作方式。您可以在Shield UI網(wǎng)站上查看有關(guān)Shield UI jQuery網(wǎng)格組件的更多示例。

經(jīng)常詢問的問題（常見問題解答）關(guān)於用jQuery和bootstrap

>如何自定義可編輯網(wǎng)格的外觀？您可以修改網(wǎng)格的顏色，字體，邊框和其他視覺元素，以匹配您網(wǎng)站的設(shè)計(jì)。您還可以使用Bootstrap的內(nèi)置類來快速造型網(wǎng)格。對(duì)於更高級(jí)的自定義，您可以使用Shield UI Lite的API，該API提供了多種選擇用於修改網(wǎng)格的外觀和行為。

>

>我可以將可編輯的網(wǎng)格與其他JavaScript庫一起使用嗎？是的，可編輯的網(wǎng)格與其他JavaScript庫（例如AngularJs，react和vue.js.s.）兼容。您可以使用這些庫來增強(qiáng)網(wǎng)格的功能，例如添加動(dòng)態(tài)數(shù)據(jù)加載，排序和過濾功能。

>

如何在編輯網(wǎng)格中添加或刪除行？您可以使用網(wǎng)格的API在可編輯網(wǎng)格中添加或刪除行。 API提供了添加新行，刪除現(xiàn)有行以及更新網(wǎng)格中數(shù)據(jù)的方法。您也可以使用API??編程選擇行，這對(duì)於實(shí)現(xiàn)批量編輯或刪除功能可能很有用。

>如何在可編輯網(wǎng)格中驗(yàn)證用戶輸入？

>您可以使用Shield UI Lite的內(nèi)置驗(yàn)證功能在可編輯網(wǎng)格中驗(yàn)證用戶輸入。該庫提供了各種驗(yàn)證規(guī)則，例如所需字段，數(shù)字範(fàn)圍和電子郵件格式。您還可以創(chuàng)建自定義驗(yàn)證規(guī)則來處理更複雜的驗(yàn)證方案。

>我可以從可編輯網(wǎng)格中導(dǎo)出數(shù)據(jù)嗎？

是的，您可以將數(shù)據(jù)從可編輯網(wǎng)格導(dǎo)出到各種格式。例如CSV，Excel和PDF。這可以使用網(wǎng)格的API完成，該API提供了導(dǎo)出網(wǎng)格數(shù)據(jù)的方法。您還可以自定義導(dǎo)出的數(shù)據(jù)，例如包括或排除某些列，或以特定方式格式化數(shù)據(jù)。

>

>如何將數(shù)據(jù)加載到可編輯的網(wǎng)格中？從各種來源（例如本地?cái)?shù)組，JSON文件或遠(yuǎn)程服務(wù)器）中數(shù)據(jù)數(shù)據(jù)到可編輯的網(wǎng)格。網(wǎng)格的API提供了加載數(shù)據(jù)的方法，您可以將這些方法與Ajax結(jié)合使用來從服務(wù)器加載數(shù)據(jù)。

>

>我可以在移動(dòng)應(yīng)用程序中使用可編輯的網(wǎng)格嗎？ ，可編輯的網(wǎng)格響應(yīng)迅速，可用於移動(dòng)應(yīng)用程序。網(wǎng)格的佈局將自動(dòng)調(diào)整以適合屏幕尺寸，並且您還可以使用CSS媒體查詢?cè)诓煌O(shè)備上自定義網(wǎng)格的行為。

>我如何在編輯網(wǎng)格中對(duì)數(shù)據(jù)進(jìn)行排序和過濾數(shù)據(jù)？ ??>您可以使用網(wǎng)格的API在可編輯的網(wǎng)格中進(jìn)行分類和過濾數(shù)據(jù)。 API提供了通過一個(gè)或多個(gè)列對(duì)數(shù)據(jù)進(jìn)行分類的方法，以及根據(jù)各種標(biāo)準(zhǔn)過濾數(shù)據(jù)的方法。您也可以將這些方法與AJAX結(jié)合使用來實(shí)現(xiàn)服務(wù)器端分類和過濾。

我可以使用數(shù)據(jù)庫使用可編輯的網(wǎng)格嗎？

是的，您可以將可編輯的網(wǎng)格與數(shù)據(jù)庫。您可以將數(shù)據(jù)庫從數(shù)據(jù)庫加載到網(wǎng)格中，還可以通過網(wǎng)格中的更改來更新數(shù)據(jù)庫?？梢允褂肁JAX與服務(wù)器端語言（例如PHP，ASP.NET或Node.js.s.js.s.

）組合完成此操作。可以使用Shield UI Lite的內(nèi)置錯(cuò)誤處理功能來處理可編輯網(wǎng)格中的錯(cuò)誤。該庫提供了顯示錯(cuò)誤消息，突出顯示無效字段並防止無效數(shù)據(jù)保存的方法。您還可以自定義錯(cuò)誤處理行為以適合您的需求。

以上是帶有jQuery，Bootstrap和Shield UI Lite的可編輯網(wǎng)格的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！