帶有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中文網其他相關文章！