SlickGrid 基本方法篇

最新推荐文章于 2024-09-14 08:37:42 发布
最新推荐文章于 2024-09-14 08:37:42 发布
阅读量1.6w 收藏 5
点赞数 1
转自http://blog.csdn.net/besley/article/details/8894348

SlickGrid 基本方法篇

分类： Javascript MVC 2013-05-07 11:26  3834人阅读  评论(2)  收藏  举报
SlickGrid javascript

前言：SlickGrid 是一个Javascript编写的数据控件，其采用数据虚拟显示的特性备受后来的Grid推崇，如ExtJS DataGrid，其架构设计优秀，UI交互功能非常丰富，插件化的可扩展功能开发非常值得Web开发人员学习，本文列出基本方法的使用，供开发人员参考；并在后文继续总结列出已经开发出的插件，以供开发人员参考。


0. SlickGrid 基本样式示例

功能包括：

1）首列复选框；

2）编辑器：文本编辑框，下拉框，复选框，日期控件，长文本编辑器，数字格式编辑器，YesNo编辑器等；

3）列排序，列字段值过滤，列冻结；

4）分页：客户端分页和服务端分页；

5）多字段组合查询；

6）各种列样式指定，行样式设定；

其它扩展功能依然可以通过插件完成。


1. Grid初始化及数据绑定 new、setItems、setSelectionModel

[javascript]  view plain copy
  1. var gridView;  
  2. var grid;  
  3. var data = [];  
  4. var columns = [  
  5.     { id: "id", name: "id", field: "id", behavior: "select" },  
  6.     { id: "code", name: "入库单编号", field: "code"},  
  7.     { id: "ctemp1", name: "明细款号", field: "ctemp1" }  
  8. ];  
  9. var options = {  
  10.     editable: true,  
  11.     enableCellNavigation: true,  
  12.     enableColumnReorder: true,  
  13.     asyncEditorLoading: true,  
  14.     forceFitColumns: false,  
  15.     topPanelHeight: 25  
  16. };  
  17. ajaxPost('/Stk/StkInm/StkInmSearch/' + id,  
  18. JSON.stringify(id),  
  19. function (result) {  
  20.         data = result;  
  21.         gridView = new Slick.Data.DataView({ inlineFilters: true });  
  22.         grid = new Slick.Grid("#GridSearch", data, columns, options);  
  23.         gridView.setItems(data, "id");  
  24.         grid.setSelectionModel(new Slick.RowSelectionModel());  
  25. }  



2. 隐藏列 setColumns
1) 代码设置隐藏：
[javascript]  view plain copy
  1. var visibleColumns = [];//定义一个数组存放显示的列       
  2. for (var i = 0; i < columns.length; i++) {  
  3.     if (i!=0)  
  4.        visibleColumns.push(Columns[i]);//将columns的列push进去  
  5. }  

2)设置grid的列

[javascript]  view plain copy
  1. grid.setColumns(visibleColumns);  

3)右键菜单设置隐藏：
[javascript]  view plain copy
  1. var columnpicker = new Slick.Controls.ColumnPicker(columnsSearch, gridSearch, options);  

4)当点击菜单选项时，在columnpicker控件中，有方法调用：

[javascript]  view plain copy
  1. grid.setColumns(visibleColumns);  

3. 数据分页 onDataPagedEvent
[javascript]  view plain copy
  1. //分页事件  
  2. var onDataPagedEvent = function (e, args) {  
  3.     var pageNum = args.pageNum;  
  4.     var pageSize = args.pageSize;  
  5.     loadGridPaged(pageNum, pageSize, $('#TB_Search').val());  
  6. };  
  7. //分页数据获取方法封装  
  8. function loadGridPaged(pageNum, pageSize,txt) {  
  9.     var pagetxt = {  
  10.         searchtxt: txt,  
  11.         pageNum: pageNum,  
  12.         pageSize: pageSize  
  13.     }  
  14.   
  15.   
  16.     ajaxPost('/Stk/StkInm/StkInmSearch/' + pagetxt,  
  17.                     JSON.stringify(pagetxt),  
  18.                 function (result) {  
  19.             data = result.t;  
  20.             var rowCount = result.s;  
  21.             var pageCount = Math.ceil(rowCount / pageSize);  
  22.   
  23.   
  24.                    var pageInfo = {};  
  25.             pageInfo.pageNum = pageNum;  
  26.             pageInfo.pageSize = pageSize;  
  27.                    pageInfo.totalRowsCount = rowCount;  
  28.             pageInfo.totalPagesCount = pageCount;  
  29.   
  30.   
  31.                    gridView = new Slick.Data.DataView({ inlineFilters: true });  
  32.             grid = new Slick.Grid("#GridSearch", Data, Columns, Options);  
  33.             gridView.setItems(data, "id");  
  34.             grid.setSelectionModel(new Slick.RowSelectionModel());  
  35.   
  36.   
  37.                 //注册分页控件  
  38.             var pager = new Slick.Controls.PagerSvr(gridView, grid, PageInfo, $("#pagergrid"));  
  39.               pager.onDataPaged.subscribe(onDataPagedEvent);  
  40.               });  
  41.     }  


4. gird单击、双击事件: onClick、onDblClick

    

[javascript]  view plain copy
  1. grid.onClick.subscribe(function (e, args) {  
  2.        //单击事件发生的处理逻辑  
  3.    });  
  4.     grid.onDblClick.subscribe(function (e, args) {  
  5.       //双击事件发生的处理逻辑  
  6.    });  

5. 编辑单元格，改变另外一个单元格
 
[javascript]  view plain copy
  1. //未用DataView编辑单元格数据  
  2.         gridProduct.onCellChange.subscribe(function (e, args) {  
  3.             gridProduct.invalidateRow(args.row);  
  4.             dsProduct[args.row]["Notes"] = dsProduct[args.row]["Notes"] + "new string added.";  
  5.             gridProduct.render();  
  6.         });  
  7.   
  8.   
  9.  //DataView编辑单元格数据  
  10.         gridProduct.onCellChange.subscribe(function (e, args) {  
  11.             var item = args.item;  
  12.             item.Notes = item.Notes += " new sring added.";  
  13.             changedItemsProduct.push(item);  
  14.             dataViewProduct.updateItem(item.ID, item);  
  15.             grid.render();  
  16.     }  

6. 行描色、单元格描色、字体描色 setCellCssStyles
[javascript]  view plain copy
  1. //默认单元格描色  
  2. var attachdColumns = [  
  3.     { id: "ID", name: "ID", field: "ID", behavior: "select", cssClass: "readonlycss",formatter: ztcolFormat },  
  4.     { id: "attid", name: "attid", field: "attid", cssClass: "readonlycss" },  
  5.     { id: "att_name", name: "文件名", field: "att_name" },  
  6.     { id: "att_path", name: "路径", field: "att_path" },  
  7.     { id: "txt", name: "主题", field: "txt"},  
  8.     { id: "att_remarks", name: "内容", field: "att_remarks" }  
  9. ];  
  10.                     var colarry = [];  
  11. function ztcolFormat(row, cell, value, columnDef, dataContext) {  
  12.     if (dataContext.txt != "") {  
  13.         colarry.push(row);  
  14.     }  
  15.     //须return，否则无数据显示  
  16.     return value;  
  17. }  
  18. for (var i = 0; i < colarry.length; i++) {  
  19.      hash[colarry[i]] = {};  
  20.      hash[colarry[i]]["attid"] = "changed2";  
  21. }  
  22.  //给第四行描色  
  23.  for (var i = 0; i < attachdColumns.length; i++) {  
  24.      hash[3][attachdColumns[i].id] = "changed";  
  25.  }  
  26.   
  27.   
  28.  gridattachd.setCellCssStyles("hightlight", hash);  


7. 行选定方法
[javascript]  view plain copy
  1. function getSelectedDataItem() {  
  2.     if (!selectionModel) {  
  3.         throw "Selection model is not set";  
  4.     }  
  5.     return getDataItem(selectedRows[0]);  
  6. }  
  7.   
  8.   
  9. function getSelectedDataItems() {  
  10.     if (!selectionModel) {  
  11.         throw "Selection model is not set";  
  12.     }  
  13.     var items = selectedRows.map(function (x) {  
  14.         return getDataItem(x);  
  15.     });  
  16.     return items;  
  17. }  
  18.   
  19.   
  20. 调用示例：  
  21. var row = grid.getSelectedDataItem();  
  22. 及  
  23. var rows = grid.getSelectedDataItems();  

8. 单元格值改变事件 onCellChange
[javascript]  view plain copy
  1. //单元格值改变事件  
  2. gridBom.onCellChange.subscribe(function (e, args) {  
  3.     var index = args.row;  
  4.     var item = gridViewBom.getItemByIdx(index);  
  5.     item.pyardcw = item.pyard * item.wear;  
  6.     //gridViewBom.updateItem(args.item.ID, item);  
  7.     gridBom.updateRow(args.row);  
  8.     if (editData.length > 0) {  
  9.         var live = false;  
  10.         for (var i = 0; i < editData.length; i++) {  
  11.             if (editData[i].ID == args.item.ID) {  
  12.                 editData[i] = item;  
  13.                 live = true;  
  14.             }  
  15.         }  
  16.         if (live == false) {  
  17.             editData.push(item);  
  18.         }  
  19.     }  
  20.     else { editData.push(item); }  
  21. });  

9. 选中行改变事件
[javascript]  view plain copy
  1. //选中行改变事件  
  2. gridBom.onSelectedRowsChanged.subscribe(function (e, args) {  
  3.     var item = gridViewBom.getItemByIdx(selectedRowIndex);  
  4.     //添加状态码下拉框  
  5.     var selectDom = "<SELECT tabIndex='0' class='editor-select-dynamic'>";  
  6.     ajaxPost('/WebFramework/Sampric/BindMtrStauts/' + item.mtrid,  
  7.         JSON.stringify(item.mtrid),  
  8.         function (result) {  
  9.             if (result != null) {  
  10.                 var aa = [];  
  11.                 aa = result;  
  12.                 for (var i = 0; i < aa.length; i++) {  
  13.                     var statusItem = result[i];  
  14.                     selectDom += "<OPTION value='" + statusItem.ID + "'>" + statusItem.Text + "</OPTION>";  
  15.                 }  
  16.                 selectDom += "</SELECT>";  
  17.                 args.grid.$selDropdownlistDatasource = $(selectDom);  
  18.             }  
  19.         });  
  20.     args.grid.onTextButtonClick = function (arg) {  
  21.         //e.stopPropagation();  
  22.         var strValue = 'hello world';  
  23.         alert("打开新窗口页面，包含要选取的数据列表！");  
  24.         arg.textContent = strValue;  
  25.     };  
  26. });  

10. 合并单元格(未完整版) groupFormatter
[javascript]  view plain copy
  1. //合并成本项目  
  2. var xm = "a";  
  3. function groupFormatter(row, cell, value, columnDef, dataContext) {  
  4.     if (dataContext.fsttxt == xm) {  
  5.          if (value != "")  
  6.             columnDef.cssClass = "noneLine";  
  7.         return "";  
  8.     }  
  9.     else {  
  10.         xm = dataContext.fsttxt;  
  11.         return value;  
  12.     }  
  13. }  

11. 新增行
[javascript]  view plain copy
  1. var pstItem = { id: "", stkid: "", stktxt: "", stkp: "", memo: "" };  
  2. //添加  
  3. function addPst() {  
  4.     if (stkid <= 0)  
  5.         return;  
  6.     pstItem.stkid = stkid;  
  7.     pstItem.stktxt = stkItm.txt;  
  8.     Datapst.push(pstItem);  
  9.     gridpst.updateRowCount();  
  10.     gridpst.render();  
  11. }  

12. 复制行

[javascript]  view plain copy
  1. //复制行  
  2. function copyRow(result, selectedRowIndex) {  
  3.     var item = gridViewBom.getItemByIdx(selectedRowIndex);  
  4.     //gridBom.invalidateRow(result.length);  
  5.     item.ID = "";  
  6.     result.push(item);  
  7.     gridBom.updateRowCount();  
  8.     gridBom.render();  
  9. }  


13. 删除行
[javascript]  view plain copy
  1. //删除  
  2. function delPst() {  
  3.     if (confirm("确定删除明细吗?")) {  
  4.         if (pstid == undefined || pstid == null || pstid == "" || pstid <= 0) {  
  5.         }  
  6.         else {  
  7.             ajaxPost('/Stk/StkMain/DelPst/' + pstid,  
  8.                 JSON.stringify(pstid),  
  9.                 function (result) {  
  10.                     alert("删除成功！");  
  11.                 });  
  12.         }  
  13.         datapst.splice(pstsIndex, 1);  
  14.   
  15.   
  16.         gridpst.invalidateRow(pstsIndex);  
  17.         gridpst.updateRowCount();  
  18.         gridpst.render();  
  19.     }  
  20. }  

14. Grid修改后离开提示保存
[javascript]  view plain copy
  1. //离开提示保存  
  2. function leaveSave() {  
  3.     if (editData.length!=0) {  
  4.         if (confirm("尚未保存明细，是否保存?")) {  
  5.             save();  
  6.             alert("保存成功!")  
  7.         }  
  8.         else {  
  9.             editData = [];  
  10.         }  
  11.     }  
  12. }  


15. grid样式保存
[javascript]  view plain copy
  1. //保存样式到cookie  
  2. function saveGridStyle() {  
  3.     newColumns = gridBom.getColumns();  
  4.     for (var i = 0; i < newColumns.length; i++) {  
  5.         if (newColumns[i].editor != undefined) {  
  6.             newColumns[i].editor = getDomStyle(newColumns[i].editor.toString());  
  7.         }  
  8.     }  
  9.     //BomColumns = newColumns;  
  10.     ajaxPost('/WebFramework/Sampric/SaveGridBomStyle/',  
  11.         JSON.stringify(newColumns),  
  12.         function (result) {  
  13.             if (result != null) {  
  14.                 //获取存在cookie的样式  
  15.                 //var gridStyle = JSON.parse(JSON.parse(result).gridBom);  
  16.                 alert("ok");  
  17.                 getBomStyle();  
  18.                 bindBom(searchItem.ID);  
  19.             }  
  20.         });  
  21. }  
  22. //取样式  
  23. function getBomStyle() {  
  24.     ajaxPost('/WebFramework/Sampric/GetBomStyle/',  
  25.         '',  
  26.         function (result) {  
  27.             if (result != false) {  
  28.                 //获取存在cookie的样式  
  29.                 var gridStyle = JSON.parse(JSON.parse(result).gridBom);  
  30.                 newColumns = gridStyle;  
  31.             }  
  32.         });  
  33. }  
  34. //清除cookie样式  
  35. function coverGrid() {  
  36.     ajaxPost('/WebFramework/Sampric/ClearGridStyle/',  
  37.     '',  
  38.     function (result) {  
  39.         if (result != null) {  
  40.             newColumns = [];  
  41.             alert("恢复成功!");  
  42.             getBomStyle();  
  43.             bindBom(searchItem.ID);  
  44.         }  
  45.     });  
  46. }  


16. 右键菜单栏 contextMenu
[javascript]  view plain copy
  1. //gridBom右键菜单  
  2. $("#gridBom").contextMenu('myMenu', {  
  3.     bindings: {  
  4.         'savestyle': saveGridStyle,  
  5.         'clearstyle': coverGrid  
  6.     }  
  7. });  

17. 默认选中第一行
[javascript]  view plain copy
  1. //默认选中第一行  
  2. var attachrows = [];  
  3. var attachitem;  
  4. if (attachData.length > 0) {  
  5.     attachrows.push([0]);  
  6.     gridattach.setSelectedRows(attachrows);  
  7.     attachitem = gridViewattach.getItemByIdx(0);  
  8.     //附件从表  
  9.     bindGridAttachd(attachitem.ID);  
  10. }  
  11. else  
  12.     $('#gridattachd').empty();  
  13.   
  14.   
  15. Ps：多行选择，界面多行合计，列拖动直接删除列（样式）  

18. 行是否可编辑、单元格是否可以编辑的判断 onBeforeEditCell
[javascript]  view plain copy
  1. //是否可编辑行的验证  
  2. gridProduct.onBeforeEditCell.subscribe(function (e, args) {  
  3.         //此处列出行属性，同样也可以获取列属性，从而定位单元格  
  4.     if (args.row === 4) {  
  5.         return false;  
  6.     }  
  7. });  

19. 列是否可以编辑
[javascript]  view plain copy
  1. var columnsProduct = [  
  2.  { id: "ID", name: "产品编号", field: "ID", fieldType: "number", width: 100, cssClass: "cell-title" },  
  3.  { id: "ProductName", name: "产品名称", field: "ProductName", fieldType: "string", width: 120, hasFilter: true, editor: Slick.Editors.TextButton },  
  4.  { id: "UnitPrice", name: "单价", field: "UnitPrice", fieldType: "number", hasFilter: true, editor: Slick.Editors.Text }  
  5. ];  
  6.   
  7.   
  8. gridProduct = new Slick.Grid("#myGridProduct", dataViewProduct, columnsProduct, optionsProduct);  


如果要使整列不可编辑，在定义Columns时，对该列不要设置Editor的属性，即该列处于不能编辑的状态；如果要使该列重新处于编辑状态，则更新列定义，添加该列的Editor属性。


20. 行的样式设定 getItemMetadata
为特定行指定样式，比如对满足某些条件的行，进行颜色字体的设置，用于突出显示，则使用getItemMetadata方法，返回自定义的行样式。


[javascript]  view plain copy
  1. .slick-row.redrowextra {   
  2.     color:red;   
  3.     font-size:18px;   
  4.     font-style: italic;   
  5.     font-weight: bold;   
  6. }   
  7.   
  8.   
  9. .slick-row.redrowreadonly {   
  10.     color:peru;   
  11.     font-size:18px;   
  12.     font-style: italic;   
  13.     font-weight: bold;   
  14. }  
  15.   
  16.   
  17. dataViewProduct.getItemMetadata = function (row) {  
  18.     if (row % 2 === 1) {  
  19.         return {  
  20.             'cssClasses': 'redrowextra'  
  21.         };  
  22.     } else {  
  23.         return {  
  24.             'cssClasses': ' redrowreadonly'  
  25.         };  
  26.     }  
  27. }  


21 列样式设定 formatter
[javascript]  view plain copy
  1. //先根据列数值，定义列样式：  
  2. var numberFormatter = function (row, cell, value, columnDef, dataContext) {  
  3.     try {  
  4.         if (value < 100)  
  5.             return '<font color="orange">' + value + '</font>';  
  6.         else if (value >= 5000)  
  7.             return '<font color="blue">' + value + '</font>';  
  8.         else  
  9.             return '<font color="green">' + value + '</font>';  
  10.     } catch (e) {  
  11.         return '';  
  12.     }  
  13. }  
  14.   
  15.   
  16. //然后在列定义数组中，指定formatter属性；下面的例子是为”UnitPrice”列指定数字格式的样式，根据数字范围进行数据的颜色标识，对于业务人员处理数字类型的操作时，比较有用。  
  17. var columnsProduct = [  
  18.    { id: "ID", name: "产品编号", field: "ID", fieldType: "number", width: 100, cssClass: "cell-title" },  
  19.    { id: "ProductName", name: "产品名称", field: "ProductName", fieldType: "string", width: 120, hasFilter: true, editor: Slick.Editors.TextButton },  
  20.    { id: "UnitPrice", name: "单价", field: "UnitPrice", fieldType: "number", hasFilter: true, editor: Slick.Editors.Text, formatter: numberFormatter }  
  21. ]  

SlickGrid 源代码网站：
https://github.com/mleibman/SlickGrid
dusea
关注
SlickGrid 插件开发(1)：插件功能总结
上步七星
05-11 1万+
前言：在前篇文章中，总结了SlickGrid 的基本方法，SlickGrid其功能扩展主要靠插件技术；这也是体现出作者Melibman 架构设计的优秀之处。本文列出了Master版本提供的插件以外，另外特意列出了在项目中添加的新的插件，供SlickGrid的开发人员参考(目前会在分支版本中提供，并未合并到SlickGrid的主版本中去)。 1. 基本插件列表 插件名称
SlickGrid学习
男神的专栏
07-14 418
启用单元格导航，可以点单元格。
slickgrid手册
05-23
slickgrid开发手册，上传只是为了方便下载使用
SlickGrid 快速入门与实践指南
最新发布
gitblog_00182的博客
09-14 495
SlickGrid 快速入门与实践指南 项目地址:https://gitcode.com/gh_mirrors/sli/SlickGrid 项目介绍 SlickGrid 是一个轻量级且高性能的JavaScript表格/电子表格组件，特别适合处理大量数据（可达数万行）并保持极佳的响应速度。该库是vanilla JS实现，支持Bootstrap，并且已经从依赖jQuery和jQueryUI进化，目前在...
SlickGrid是一个完全开源的，JavaScript，客户端网格控件，基于jQuery和jQueryUI并与Bootstrap兼容。
allway2的博客
11-06 1935
SlickGrid是一个完全开源的，JavaScript，客户端网格控件，基于jQuery和jQueryUI并与Bootstrap兼容。 网格旨在将外部组件用作数据源，这意味着SlickGrid应该与各种现代的以数据为中心的框架兼容。 关键链接 GitHub主存储库（github.com/6pac/SlickGrid） *不建议*使用原始的MLeibman SlickGrid存储库，因为自2014年以来未对其进行过维护 支持jQuery 1.x，2.x和3.x 正式发布 Wiki（文..
SlickGrid：功能强大的JavaScript网格组件
gitblog_00007的博客
03-20 552
SlickGrid：功能强大的JavaScript网格组件 SlickGridA lightning fast JavaScript grid/spreadsheet项目地址:https://gitcode.com/gh_mirrors/sl/SlickGrid SlickGrid是一个基于JavaScript的网格组件，可以轻松地在Web应用程序中呈现大量数据。它是一个开源项目，可以在GitH...
Web表格控件 SlickGrid
sweetgirl520的博客
05-26 7586
SlickGrid 是一个JavaScript编写的数据控件，其采用数据虚拟显示的特性备受后来的Grid推崇，如ExtJS DataGrid，其架构设计优秀，UI交互功能非常丰富，插件化的可扩展功能开发非常值得Web开发人员学习 SlickGrid简单介绍 : https://github.com/mleibman/SlickGrid/wiki 快速入门 : https://githu
Dojo基础与AMD规范解析
`async`设置为`true`表示启用异步加载，`parseOnLoad`设为`false`表示不立即解析页面，`paths`用于指定模块路径，如这里设置了`demos`模块的路径，`deps`则用来指定依赖的模块，如`dijit-all`和`dojox/slickgrid/...
jquery表格
08-04
3. **SlickGrid**：适用于大量数据的高性能表格，支持虚拟滚动，适合大数据场景。 4. **jqGrid**：提供多种数据源（包括JSON、XML）的支持，具备丰富的自定义选项和API。 **三、源码分析** 在`jqueryTable1.html`...
JQUERY实现的图片展示效果
08-06
本篇文章将详细探讨如何利用jQuery插件实现这样的功能，以及涉及到的关键技术和实现步骤。 首先，jQuery的灵活性使得图片切换变得简单。通过选择器选取元素，然后应用相应的动画效果，可以轻松地创建出吸引人的图片...
slick grid table
12-14
此TABLE支持排序,可编辑单元格,可禁用单元格等等
SlickGrid一个闪电快速JavaScript网格电子表格
08-07
SlickGrid - 一个闪电快速JavaScript网格/电子表格
js代码库SlickGrid源码
05-18
功能强大的js第三方开源集成库SlickGrid，可用于快速开发各类表格、图表等
WEB表格控件 SlickGrid
03-07
开源的WEB表格控件 SlickGrid
SlickGridDemo
03-20
这个是slickgrid的demo,希望对你们有用。。。。。。。
slickgrid 一个优秀的JS表格插件
a652533457的博客
11-28 362
从熟悉JS以来，慢慢的喜欢上了这个门语言。 不自觉的，看了好多js的知识，可能也是因为做项目的原因吧。 这里稍微说下一个JS的grid插件 --slickgrid 了解这个插件也不是很多，稍微了解了下以后，觉得这个插件还是蛮牛逼的嘛！！ 比如说，我们取得了json的数据以后，可以直接利用插件生成一个表格，这个其实也没有什么，最最让我感慨作者牛逼的是，原来，整个grid都是用div...
SlickGrid 插件开发(3)：Dropdownlist 下拉框控件开发
上步七星
07-09 3242
前言：用户在Grid里面的操作是一种富客户端的应用，下拉框编辑功能必不可少，目前已经整理出单元格嵌入方式的下拉框，只读下拉框列和可编辑的下拉框插件。在此把大致的开发过程总以总结说明，以飨读者。  1. DropdownList Editor -- 嵌入单元格 1). 绑定外部数据源和Changed事件 var dataSouce = args.grid.$selDro
slickgrid 中ajax,slickgrid.js 一种高性能web数据表格组件的探讨
weixin_39928736的博客
08-06 607
本文将探讨一种高性能web数据表格组件的实现，首先简单介绍slickgrid这个前人开发的组件，接着对该组件的设计和实现思路进行讨论，最后对该组件的思想进行提炼，实现基于原始思想的新组件。slickgirdslickgrid是一款高性能的web数据表格组件，由mleibman于2009年5月提交到github，仓库地址https://github.com/mleibman/SlickGrid。该组...
SlickGrid API 参考指南
此文档主要涵盖了SlickGrid的核心功能和API参考，包括网格的构造、初始化、列管理、单元格操作、渲染方法以及数据视图等。此外，还提到了一些插件和第三方包的使用，以及学习资源和测试部分。" 以下是SlickGrid API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值