晒晒基于jQuery的这个DataGrid插件

看看基本界面：

 

 

基本用法：

<table id="tt"></table>

 

$('#tt').datagrid({
    title:'Column Group',
    width:560,
    height:250,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
        {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
        {title:'Item Details',colspan:4}
    ],[
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    rownumbers:true
});

 

下载地址：http://jquery-easyui.wikidot.com/tutorial:datagrid9

 

评论

34 楼 xnxqs 2010-10-13  

我用了。1.2版的easyui.但分页大小，好像不起作用！

$('#test').datagrid({
				title:'My Title',
                pageNumber:2,//有作用
                pageSize:5,//没起作用
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				collapsible:true,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">Edit Delete</span>';
						}
					}
				],[
					{field:'name',title:'Name',width:120},
					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
						sorter:function(a,b){
							return (a>b?1:-1);
						}
					},
					{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true, 
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('add')
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			if (p){
				$(p).pagination({
					onBeforeRefresh:function(pageNumber, pageSize){
						alert('pageNumber:'+pageNumber+',pageSize:'+pageSize); 
					},
                     pageList:[5,10,15,20],
					 showRefresh:true,
					 pageSize:5//没起作用
				});
			}
		});

这是原网站down下来的例子。再三测试pagesize没起作用。所有的列表都是全部一次性显示出来的。bug？

33 楼 jinqibu 2010-08-12  

easyui没有静态排序，不过1.2版本有sortot函数来补充

32 楼 zachary.guo 2010-08-02  

目前的分页，必须向服务器发请求。有时候数据就几百条，这些数据可以缓存到客户端浏览器中，并在浏览器端分页，此插件貌似不支持静态数据分页。

望作者添加静态数据分页的功能。

31 楼 zachary.guo 2010-08-02  

将简单的 table 转为 datagrid，例子中只是加了 class="easyui-datagrid" 的字样，可源代码中，不管是 js 还是 css 代码，都未找到关于 easyui-datagrid 的字样，我看到的效果就是普通的 table，没有任何样式。该加的样式和脚本文件我都加了。请指点。

30 楼 菜菜菜 2010-07-05  

joyfun 写道

对那个多级表头比较感兴趣

同样感兴趣

29 楼 stworthy 2009-11-25  

数据来自数据库，需要正确搭建数据库后才能显示数据。
可以看看http://www.etmvc.cn/project/show/67中的在线演示。

28 楼 a3mao 2009-11-24  

stworthy 写道

对DataGrid插件的功能进行了扩充：

<li>支持列冻结功能
</li>
• 支持rownumbers功能，即自动产生序列，序列在翻页后能连续，这点不象EXTJS，每页的序列各管各的。

新例子的测试代码：http://www.etmvc.cn/forumReply/index?forumSubjectId=139

 

看一下界面：

<img src="http://www.etmvc.cn/forum/showImage/71" alt="" width="605" height="354">

我下载了这个例子想试试看，但是却什么都显示不出来，请问是怎么回事呢

27 楼 czwlucky 2009-11-24  

<p>博主做的挺棒啊，可以和Ext-DataGrid，<a href="http://www.dhtmlx.com/" target="_blank">DHTMLX-DataGrid</a>，还有JavaEye上的fins的GT-Grid有一拼了。 我要是有博主这样的CSS功底，也会去做一下：）<br>希望博主博采众长，做出更优秀的作品来。<br><br>我有一个建议，不知道是否得当： 能否让数据格式更加灵活点，比如，提供数据总数的名字可定制（不论是后台定制还是前台定制）</p>
<p> </p>

26 楼 stworthy 2009-11-18  

datagrid向后台发送参数：
page:页号
rows:每页记录数
sort:排序字段
order:排序方式：asc|desc

后台向前台datagrid返回以下格式数据：
{
total:239,
rows:[
{code:'001',name:'名称1',addr:'红领巾路1号',col4:'col4 data'},
{code:'002',name:'名称1',addr:'红领巾路2号',col4:'col4 data'},
{code:'003',name:'名称1',addr:'红领巾路1号',col4:'col4 data'},
{code:'004',name:'名称1',addr:'红领巾路1号',col4:'col4 data'},
{code:'005',name:'名称1',addr:'红领巾路1号',col4:'col4 data'},
{code:'006',name:'名称1',addr:'红领巾路1号',col4:'col4 data'}
]
}

25 楼 gundumw100 2009-11-17  

如果用ssh取后台数据的话该怎么做？
这样子？
url: 'xxx.do?action=datagrid',？？？

public View getSales(int page, int rows, String sort, String order) throws Exception {
long total = Sale.count(Sale.class, null, null);
List<Sale> sales = Sale.findAll(Sale.class, null, null, sort+" "+order, rows, (page-1)*rows);
Map<String, Object> result = new HashMap<String, Object>();
result.put("total", total);
result.put("rows", sales);
return new JsonView(result);
}？？？
谢谢提示

24 楼 zouzou 2009-11-11  

给些insert数据验证一下就好了:)

23 楼 zouzou 2009-11-11  

这个多表头不错哟，能否考虑表头自动生成？

22 楼 stworthy 2009-11-11  

DataGrid插件未完成哦，还在不断考虑该加入那些功能合适，待完成时文档编写当然少不了。性能问题也需要优化。
所以欢迎大家提出各种意见，或功能或使用上的想法和要求。有大家的帮助才能把它做得更好。

21 楼 leopku 2009-11-10  

强烈要求完善文档

以前用的ext的grid
这次拿来写一个小东西，基本功能实现倒没问题
不过想了解详细信息时，真是郁闷到了!!!

20 楼 lydawen 2009-11-10  

woaiwofengkuang 写道

建议去看一下dorado

似乎是收费的吧？

19 楼 stworthy 2009-11-09  

<p>对DataGrid插件的功能进行了扩充：</p>
<ul>
<li>支持列冻结功能
</li>
<li>支持rownumbers功能，即自动产生序列，序列在翻页后能连续，这点不象EXTJS，每页的序列各管各的。</li>
</ul>
<p>新例子的测试代码：<a href="http://www.etmvc.cn/forumReply/index?forumSubjectId=139" target="_blank">http://www.etmvc.cn/forumReply/index?forumSubjectId=139</a></p>
<p> </p>
<p>看一下界面：</p>
<p><img src="http://www.etmvc.cn/forum/showImage/71" alt="" width="605" height="354"></p>

18 楼 stworthy 2009-11-09  

分页栏就是借鉴了flexigrid，但允许在分页栏上增加自定义工具，这一点象extjs。
属性的命名更多是借鉴了dojo和jqgrid。

17 楼 piziwang 2009-11-08  

感觉你的代码设计和flexigrid有很多相同的地方， 在设计的时候是不是借鉴了 flexigrid ，呵呵

16 楼 stworthy 2009-11-08  

datagrid中有这样一项配置url: '/test9/sale/getSales'，将用于获取数据。这个URL将由etmvc框架映射到SaleController控制器类中的getSales方法。

数据库的连接配置在/WEB-INF/classes/activerecord.properties中描述。

15 楼 woaiwofengkuang 2009-11-08  

建议去看一下dorado