全自動資料表格JQuery版
阿新 • • 發佈：2018-12-29
由於最近工作上有些變動，已經快一個月沒有寫部落格了。上一篇部落格介紹了全自動資料表格的設計思路以及分享了一個react.js的實現。但是現實情況中為了節約開發成本，很多中小型企業是很難做到前後端完全分離的，加上目前國內使用react.js的公司可能是太少了吧，於是又折騰著寫了一個JQuery版本的，結合mvc的模板頁也達到了相同的效果（程式碼量方面），有興趣的小夥伴也可以嘗試寫一寫angular或者vue版本的，用起來真的能少寫很多程式碼的。
使用到的js庫：
效果圖-列表頁：
效果圖-彈出框：
檢視頁全部程式碼：
column屬性詳細介紹：
目前整個bode.grid.js還有很多需要完善地方，我會在以後的使用過程中繼續完善修改，本次分享僅供交流，如要使用，要做好填坑的準備。其實整個原始碼還是比較簡單的，只有600行程式碼，有興趣的小夥伴可以看看，歡迎交流。
效果圖-彈出框：
檢視頁全部程式碼：
@{ ViewBag.Title = "Table"; Layout = "~/Areas/Admin/Views/Shared/_GridLayout.cshtml"; } @section customScript{ <script type="text/javascript"> var enums = @Html.Raw(Json.Encode(@ViewBag.Enums)); urlView Code 服務端程式碼：= { read: "/api/services/product/products/GetProductPagedList", add: "/api/services/product/products/CreateProduct", edit: "/api/services/product/products/UpdateProduct", delete: "/api/services/product/products/DeleteProduct" }; columns = [ { data:"id", title: "編號" }, { data: "name", title: "商品名稱", type: "text", query: true, editor: {} }, { data: "brief", title: "商品簡介", type: "textarea", query: true, editor: {} }, //{ data: "detail", title: "商品詳情", type: "richtext", query: true, editor: {} }, { data: "price", title: "價格", type: "number", query: true, editor: {} }, { data: "cover2", title: "封面", type: "img", editor: {} }, { data: "isOnShelf", title: "是否上架", type: "switch", editor: {} }, { data: "enumTest", title: "列舉測試", type: "dropdown", editor: {},source:{data:enums} }, { data: "onShelfTime", title: "上架時間", type: "timepicker", editor: {} }, { title: "操作選項", type: "command", actions: [ { name: "操作", icon: "fa-trash-o", onClick: function (d) { alert(d["id"]); } } ] } ]; </script> }
using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Threading.Tasks; using Abp.Application.Services; using Abp.Application.Services.Dto; using Abp.Application.Services.Query; using Abp.AutoMapper; using Abp.Domain.Repositories; using BodeAbp.Product.Products.Dtos; namespace BodeAbp.Product.Products { /// <summary> /// 商品 應用服務 /// </summary> public class ProductsAppService : ApplicationService, IProductsAppService { private readonly IRepository<Domain.Product,long> _productRepository; /// <summary> /// 建構函式 /// </summary> /// <param name="productRepository"></param> public ProductsAppService(IRepository<Domain.Product, long> productRepository) { _productRepository = productRepository; } /// <inheritdoc/> public async Task<PagedResultOutput<GetProductListOutput>> GetProductPagedList(QueryListPagedRequestInput input) { int total; var list = await _productRepository.GetAll().Where(input, out total).ToListAsync(); return new PagedResultOutput<GetProductListOutput>(total, list.MapTo<List<GetProductListOutput>>()); } /// <inheritdoc/> public async Task CreateProduct(CreateProductInput input) { var product = input.MapTo<Domain.Product>(); await _productRepository.InsertAsync(product); } /// <inheritdoc/> public async Task UpdateProduct(UpdateProductInput input) { var product = await _productRepository.GetAsync(input.Id); input.MapTo(product); await _productRepository.UpdateAsync(product); } /// <inheritdoc/> public async Task DeleteProduct(IdInput input) { await _productRepository.DeleteAsync(input.Id); } } }View Code 表格請求Json格式：
{ "pageIndex":1, "pageSize":15, "sortConditions":[ { "sortField":"name", "listSortDirection":1 } ], "filterGroup":{ "rules":[ { "field":"displayName", "operate":"contains", "value":"a" } ] } }
服務端響應Json格式：
{ "success": true, "result": { "totalCount": 4, "items": [ { "name": "名稱222", "brief": "簡介222", "detail": "<p>描述222</p>", "price": 3.33, "cover2": "xx", "isOnShelf": true, "onShelfTime": "1899-12-03T03:00:00+08:00", "enumTest": 1, "id": 3 } ] }, "error": null, "unAuthorizedRequest": false }
items中的欄位應與檢視頁中列配置一一對應，這樣很少的程式碼就能完全實現資料的展示、分頁、新增、編輯、刪除、查詢、排序等功能，並且還統一了編碼方式，方便質量把控和後期維護。資料表格核心檔案：bode.grid.js。在BodeAbp專案中可以看到原始碼以及一個比較完善的demo。整個demo依然遵循前後端分離的模式，只用到了MVC的檢視頁作為前端展示。BodeAbp專案地址：https://github.com/liuxx001/BodeAbp。
bode.grid.js原始碼這裡就不過多介紹了，思路和上一篇部落格所說一致，只是換了一種實現方式而已。JQuery版表格與React.js版的api還是有一些出入，不過總體來說功能是增強了，具體介紹如下： 初始化方式： var table=new $.bode.grid("#dataTable", {...}); 表格api：| 引數 | 型別 | 說明 | 預設值 |
| url | object |
遠端介面配置，示例：{read:"",add:"",edit:"",delete:""} 其中add、edit、delete屬於功能項，不配置url相關功能不會顯示 |
|
| columns | array[object] | 列配置，下文會詳細介紹 | |
| actions | array[object] |
右上角操作按鈕，預設新增"搜尋"; 如果url配置了add，則新增"新增"選項 |
|
| imgSaveUrl | string | img型別圖片上傳地址 | "/api/File/UploadPic" |
| formId | string | 彈出框id | "bode-grid-autoform" |
| formWidth | string | 彈出框寬度，支援px與百分數 |
無富文字編輯器時：40%； 有富文字編輯器時：60% |
| pageIndex | number | 頁序號 | 1 |
| pageSize | number | 每頁數量 | 15 |
| beforeInit | function | 初始化前執行 | |
| initComplete | function | 初始化後執行 | |
| loadDataComplete | function | 每次資料重新載入後執行 |
| title | string | 表頭顯示標題 | |
| data | string | 從資料來源獲取對應的欄位名 | |
| type | string |
該列的型別，現支援的型別有： text、textarea、richtext、number、switch、dropdown、 img、datepicker、timepicker、hide、command |
|
| query | boolean | 是否允許查詢 | false |
| editor | object | 編輯相關配置，還可以繼續完善 | |
| source | object |
dropdown型別下拉資料來源，格式： {data:[{value:"xx",text:"vv"}],textField:"xx",valueField:"xx" } |
textField預設"text"； valueField預設"value" |
| sortDisable | boolean | 是否禁止排序 | false |
| render | function(v,d) | 自定義列渲染事件,v表示當前單元格的資料，d表示當前行的資料 | |
| editor | object |
{ap:"hide",ep:"disabled"};ap:新增模式,ep:編輯模式;'hide'表示 隱藏該列,'disabled'表示該列不可編輯 |
目前整個bode.grid.js還有很多需要完善地方，我會在以後的使用過程中繼續完善修改，本次分享僅供交流，如要使用，要做好填坑的準備。其實整個原始碼還是比較簡單的，只有600行程式碼，有興趣的小夥伴可以看看，歡迎交流。