自己写的grid。
$.fn.extend({
grid:function(url,param, columnList){
$(this).empty();
var table=$("<table>").addClass("table table-striped pull-left").css({"table-layout":"fixed"}), thead = $("<thead>"), tbody=$("<tbody>"),tr=$("<tr>")
table.data("url",url).data('param',param).data("columnList",columnList);
for(var i=0;i<columnList.length;i++){
var column=columnList[i];
tr.append($("<td>").html(column['title']).css(column['css']?column['css']:{}));
}
thead.append(tr);
table.append(thead).append(tbody);
var pagination = $("<div>").addClass("row").append($("<div>").addClass("pull-left col-sm-6")).append($("<div>").css({"text-align":"right"}).addClass("pull-right col-sm-6").append($("<ul>").addClass("pagination").css("margin-top","-10px")));
$(this).append(table).append(pagination);
renderTable($(this).prop("id"),1);
}
});
function renderTable(id,pageNo){
var count=0,data,table=$("#"+id).children("table");
table.data("pageNo",pageNo).data("data",{}).data("count",0);
table.children("tbody").empty();
table.next("div").children("div:eq(0)").html("");
table.next("div").find("ul").empty();
$.ajax({
type:'get',
dataType:'json',
url:table.data("url"),
data:table.data("param")?$.extend(table.data("param"),{pageNo:pageNo}):{pageNo:pageNo},
success:function(result){
count=result['count']?result['count']:0;
data=result['data']?result['data']:{};
table.data('data',data).data("count",count);
var totalPage=Math.floor((count-1)/((table.data("param") && table.data("param")["pageSize"])?table.data("param")["pageSize"]:10)) + 1;
table.data("totalPage",totalPage);
var tbody=table.children("tbody");
var pagination=table.next("div");
var ul=pagination.find("ul");
if(totalPage <=0){
pagination.children("div:eq(0)").text("没有数据");
}else{
pagination.children("div:eq(0)").text("共"+count+"条,"+totalPage+"页");
ul.append($("<li>").append($("<a>").html("«").prop("title","第一页").prop("href","javascript:renderTable('"+id+"',1)")));
var begin=pageNo-3;
var end=pageNo+3;
if(begin<1){
begin=1;
}
if(end>totalPage){
end=totalPage;
}
if(begin>1){
ul.append($("<li>").addClass("disabled").append($("<a>").html("...")));
}
for(var i=begin;i<pageNo;i++){
ul.append($("<li>").append($("<a>").html(i).prop("href","javascript:renderTable('"+id+"',"+i+")")));
}
for(var i=pageNo;i<=end;i++){
ul.append($("<li>").append($("<a>").html(i).prop("href","javascript:renderTable('"+id+"',"+i+")")));
}
if(end<totalPage){
ul.append($("<li>").addClass("disabled").append($("<a>").html("...")));
}
ul.append($("<li>").append($("<a>").html("»").prop("title","最后一页").prop("href","javascript:renderTable('"+id+"',"+totalPage+")")));
}
ul.find("li a").each(function(){
if($(this).text()==pageNo){
$(this).parent("li").addClass("active");
}
});
var columnList = table.data("columnList");
for(var i=0;i<data.length;i++){
tr=$("<tr>");
for(var j=0;j<columnList.length;j++){
var column=columnList[j];
tr.append($("<td>").html(column['template']?column['template'](data[i]):data[i][column['field']]).css(column['css']?column['css']:{}));
}
tbody.append(tr);
}
table.find("td").each(function(){
$(this).prop("title", $(this).html()).css({"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap"});
});
}
});
}
用法:第一个参数是请求url,第二个是请求参数,json格式,第三个是标题列表,有title,field,template,css。template优先级比field高,css是对这列添加样式。
分页参数是pageSize和pageNo。
$("#table").grid("url",{},[{title:'id',field:'boxNum'},{title:'取消时间',template:function(d){return new Date(d['cancelTime']).toLocaleDateString()},css:{width:'800px',color:'green','font-weight':'bolder'}}]);
分享到:
相关推荐
Streamlit网页中功能强大的表格显示与处理组件:streamlit-aggrid 中样例源代码,版本为streamlit-aggrid==0.2.3-2。 文件列表如下: custom_css.py example.py example_highlight_change.py fixed_key_example.py ...
oracle 12C Grid软件: winx64_12102_grid_1of2.zip winx64_12102_grid_2of2.zip 适用于Windows 64位系统,文件分割成 2个 压缩包,必须集齐2个 文件后才能一起解压一起使用: winx64_12102_grid.part2.rar ...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
ag-grid我没找到汉化提示的js(没仔细找),下载了官方的社区版js代码,记事本查找替换的,如果没积分可以自己搜索替换,我只改了contains(模糊查找)、not contains(模糊过滤)、equals(精确查找)、not equals...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Advancements in grid converter technology have been pivotal in the successful integration of renewable energy. The high penetration of renewable energy systems is calling for new more stringent grid ...
Grid++Report 是一款高性能的报表开发工具,特别适用于管理信息系统,如ERP、进销存、财务等软件的报表开发。针对票据套打进行了专门实现,也是实现票据打印的好工具。Grid++Report是完全可编程的报表工具,是制作...
Grid++Report报表组件适用于VB.NET、C#、VB、VC、Delphi、C++Builder、Foxpro(VFP)、易语言等一切支持COM的开发工具。除了提供报表的统计分析、打印、打印预览、数据导出等功能,还提供独有的报表查询显示功能,让...
Grid Generation Methods(网格生成方法) Grid Generation Methods 2nd Edition Dec 2009 Grid Generation Methods 2nd Edition This book is an introduction to structured and unstructured grid methods ...
MagicGrid is a small and flexible JQuery grid plugin. Although it only provide basic grid function, good design model give it great flexibility. It is open source and totally free. Before your start, ...
Grid++Report是一款同时支持C/S软件(桌面程序)与B/S软件(WEB程序)开发的报表工具,功能全面易学易用。C/S开发适用于VB.NET、C#、VB6、VB、VC、Delphi、C++Builder、QT与易语言等。B/S开发适用于ASP.NET(C# & VB.NET)...
应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
基于数字pi控制的并网光伏逆变器的研究Abstract: This paper describes a digital Proportional-Integral (PI) control method for single-phase grid-connected Photovoltaic (PV) system. The control algorithm ...
最好用免费报表开发工具 Grid++Report 6.7.5.1 (6.7.20.405) 20200405 免安装版 Grid++Report是一款同时支持C/S软件(桌面程序)与B/S软件(WEB程序)开发的报表工具,功能全面易学易用。C/S开发适用于VB.NET、C#、VB6、...
DhtmlxGrid的自定义的分页样式,不是他们内部的三种皮肤分页; 本篇还有dhtmlxgird没有的复选框选中整行的效果,dhtmlxgrid多行选中使用的是 [Ctrl+鼠标]、[Shift+鼠标],在国内大部分的体验操作都是第一列放复选框的...
Oracle Database 19c (AIX.PPC64_193000_grid_home.zip), 适用于IBM AIX 系统,文件分割成 四个 压缩包,必须集齐 四个 文件后才能一起解压一起使用: AIX.PPC64_193000_grid_home.part1.rar ... ...
在一个外层grid列里生成一个grid布局的内容。比如,某班某人的各科成绩。外层是某人的信息,在这个一行里,有他的语数外三科(一个几行几列的grid)的成绩。 不是为了利益大众,是为了自己,也当做自己曾经写的一个...
Grid++Report是一款C/S与B/S集成报表工具,功能全面易学易用。C/S开发适用于VB.NET,C#,VB,VC,Delphi,BCB,VFP,易语言等。B/S开发适用于ASP.NET,ASP,PHP,JSP等,支持所有WEB服务器。开发C/S报表与B/S报表共享相同的...
PropertyGrid控件使用教程 PropertyGrid控件使用教程