javascript 实现datagrid
来源：互联网 发布：吴碧霞 知乎 编辑：程序博客网 时间：2024/05/21 08:57
1、本文主要是实现datagrid,分页采取的jQuery.pagination.js,首先我们需要引入jQuery与jQuery.pagination.js,然后实现datagrid，代码如下：
/** 扩展jQuery方法：* @author doubleicon* @url http://blog.csdn.net/u011872945 * @name datagrid.js* @since 2014/6/17*/(function ($) { $.fn.datagrid = function (data, parameter) { var _columnCount = 0; var _iconWidth = 32; var _iconHeight = 32; var field_array = new Array(); var title_array = new Array(); var width_array = new Array(); var align_array = new Array(); var toolbar_width = 0; for (var i = 0; i < parameter.columns.length; i++) { _columnCount++; field_array[i] = parameter.columns[i].field; title_array[i] = parameter.columns[i].title || ""; width_array[i] = parameter.columns[i].width || 100; align_array[i] = parameter.columns[i].align || "left"; } var sbBuilder = new Array(); for (var i = 0; i < parameter.toolbar.length; i++) { var width = parameter.toolbar[i].width || 100; toolbar_width += width; } sbBuilder = sbBuilder.concat("<table> "); sbBuilder = sbBuilder.concat("<tr>"); if (parameter.toolbar.length > 0) { sbBuilder = sbBuilder.concat("<td style='width:" + toolbar_width + "px;background: linear-gradient(to bottom, #f9f9f9 0px, #efefef 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);'></td>"); } for (var i = 0; i < _columnCount; i++) { sbBuilder = sbBuilder.concat("<td style='width:" + width_array[i] + "px;background: linear-gradient(to bottom, #f9f9f9 0px, #efefef 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);' align='" + align_array[i] + "'>"); sbBuilder = sbBuilder.concat(title_array[i]); sbBuilder = sbBuilder.concat("</td>"); } sbBuilder = sbBuilder.concat("</tr>"); for (var i = 0; i < data.length; i++) { sbBuilder = sbBuilder.concat("<tr>"); if (parameter.toolbar.length > 0) { sbBuilder = sbBuilder.concat("<td style='width:" + toolbar_width + "px'>"); for (var j = 0; j < parameter.toolbar.length; j++) { var barf_width = 100; var barf_height = 100; if (parameter.toolbar[j].width && parameter.toolbar[j].height) { barf_width = parameter.toolbar[j].width; barf_height = parameter.toolbar[j].height; } if (parameter.toolbar[j].text) { if (parameter.toolbar[j].icon) { sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>"); sbBuilder = sbBuilder.concat("<a href='javascript:void(0)' class='" + parameter.toolbar[j].icon + "' title='" + parameter.toolbar[j].text + "'>"); sbBuilder = sbBuilder.concat("</a> "); sbBuilder = sbBuilder.concat("<span>"); sbBuilder = sbBuilder.concat(parameter.toolbar[j].text); sbBuilder = sbBuilder.concat("</span>"); sbBuilder = sbBuilder.concat("</div>"); } else { sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>"); sbBuilder = sbBuilder.concat("<span>"); sbBuilder = sbBuilder.concat(parameter.toolbar[j].text); sbBuilder = sbBuilder.concat("</span>"); sbBuilder = sbBuilder.concat("</div>"); } } else { if (parameter.toolbar[j].icon) { sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>"); sbBuilder = sbBuilder.concat("<a href='javascript:void(0)' class='" + parameter.toolbar[j].icon + "' title='" + parameter.toolbar[j].text + "'>"); sbBuilder = sbBuilder.concat("</a> "); sbBuilder = sbBuilder.concat("</div>"); } } } sbBuilder = sbBuilder.concat("</td>"); } for (var j = 0; j < parameter.columns.length; j++) { sbBuilder = sbBuilder.concat("<td>"); var field = parameter.columns[j].field; var text = eval("data[" + i + "]." + field); sbBuilder = sbBuilder.concat(text); sbBuilder = sbBuilder.concat("</td>"); } sbBuilder = sbBuilder.concat("</tr>"); } sbBuilder = sbBuilder.concat("</table>"); $(this).html(""); $(this).append(sbBuilder.join("")); $(this).find("tr").each(function (i) { $(this).eq(0).find("div").each(function (j) { $(this).click(function () { parameter.toolbar[j].handler(data[i - 1]); }); }); }); }})(jQuery);</span>调用方法：
<span style="font-family:Comic Sans MS;font-size:12px;"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="script/jquery-2.1.0.js"></script> <link href="style/pagination.css" rel="stylesheet" /> <script src="script/jquery.pagination.js"></script> <script src="script/datagrid.js"></script> <link href="style/datagrid.css" rel="stylesheet" /> <script type="text/javascript"> $(function () { var data = [ { "id": 1, "Name": "小吴", "Sex": "male", "Age": 20 }, { "id": 2, "Name": "小王", "Sex": "female", "Age": 22 }, { "id": 4, "Name": "李芳", "Sex": "male", "Age": 23 }, { "id": 8, "Name": "张芳", "Sex": "female", "Age": 18 }, { "id": 10, "Name": "张波", "Sex": "male", "Age": 22 }, { "id": 11, "Name": "王辉", "Sex": "male", "Age": 21 }, { "id": 12, "Name": "张一", "Sex": "female", "Age": 24 }, { "id": 14, "Name": "郭伟", "Sex": "male", "Age": 26 }, { "id": 18, "Name": "张伟", "Sex": "female", "Age": 13 }, { "id": 110, "Name": "宁伟", "Sex": "male", "Age": 24 }, { "id": 21, "Name": "张宁", "Sex": "male", "Age": 24 }, { "id": 22, "Name": "李宁", "Sex": "female", "Age": 23 }, { "id": 24, "Name": "王宁", "Sex": "male", "Age": 27 }, { "id": 28, "Name": "王晓宁", "Sex": "female", "Age": 19 }, { "id": 210, "Name": "王宇", "Sex": "male", "Age": 20 }, { "id": 182, "Name": "张晓伟", "Sex": "female", "Age": 13 }, { "id": 1120, "Name": "宁晓伟", "Sex": "male", "Age": 24 }, { "id": 212, "Name": "张晓宁", "Sex": "male", "Age": 24 }, { "id": 222, "Name": "李晓宁", "Sex": "female", "Age": 23 }, { "id": 224, "Name": "王宁宇", "Sex": "male", "Age": 27 }, { "id": 228, "Name": "王晓宁", "Sex": "female", "Age": 19 }, { "id": 2210, "Name": "张雨", "Sex": "male", "Age": 20 } ]; var parameters = { columns: [ { field: "id", title: "编号", width: 80 }, { field: "Name", title: "姓名", width: 180 }, { field: "Age", title: "年龄", width: 180 } ], toolbar: [ { text: "zoom to", width: 100, height: 30, icon: "icon-0-0", handler: function (rowData) { } }, { text: "parcel print", width: 150, height: 30, icon: "icon-1-0", handler: function (rowData) { } }, { text: "detail info", width: 150, height: 30, icon: "icon-2-0", handler: function (rowData) { } } ] }; var pageSelectCallback = function (pageindex) { var data_detail = new Array(data[pageindex]); $("#content").datagrid(data_detail, parameters);//第一个参数是数据，第二个参数是配置 }//jQuery.pagination.js的分页 $("#paging").pagination(data.length, { callback: pageSelectCallback,//点击 prev_text: "上一页", next_text: "下一页", items_per_page: 1, load_first_page: true, ellipse_text: "...", num_edge_entries: 2, num_display_entries:4 }); }); </script></head><body> <div style="border: 0px solid blue;" id="content"> </div> <div id="paging" style="margin-top:10px;"> </div></body></html></span>运行效果如下图：
Query.pagination.js不是本文主要说明的，这里只列出其参数使用说明，参数说明如下图：
jQuery.pagination.js参照文章：http://www.zhangxinxu.com/wordpress/?p=616
jquery.pagination.js官网：http://plugins.jquery.com/project/pagination
Demo下载：http://download.csdn.net/detail/u011872945/7511095
0 0
- javascript 实现datagrid
- [原创]用javascript实现dataGrid表头排序
- JavaScript实现DataGrid中的CheckBox全选与否
- 用javascript实现动态增加DataGrid行
- JavaScript实现DataGrid中的CheckBox全选与否
- javascript实现DataGrid中的CheckBox全选与否
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- Javascript实现在DataGrid上的CheckBox全选和取消
- javascript实现datagrid客户端checkbox列的全选,反选
- 用Javascript在客户端实现遍历datagrid,DataList控件
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- javascript 实现 DataGrid中复选框的全选
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- 声飘伞下
- 北京市基本医疗保险A类定点医疗机构
- Oracle 11g R2 RAC 前置条件相关脚本
- python机器学习之adaboost元算法
- Qt浅谈之三：内置标准对话框
- javascript 实现datagrid
- 电脑管家版WiFi共享精灵简介
- VCC AVCC VDD AVDD区别
- Qt编程7：Qt定时器 QTimer使用
- TeamViewer一个很好的免费远程控制软件
- 数据库触发器详解
- 项目实现过程中遇到的问题记录（一）------------使用AsyncTask时，doInBackground没有立即执行
- ASP.NET Web API 2 对 CORS 的支持
- 片刻雨
