原创

Jquery EasyUI中DataGrid数据表格实现方案

DataGrid数据表格扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象,以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

在HTML中定义列、行和数据,静态数据在现有的表格元素中创建DataGrid数据表格,具体代码如下:

<table class="easyui-datagrid">   
    <thead>   
<tr>   
    <th data-options="field:'code'">编码</th>   
    <th data-options="field:'name'">姓名</th>   
    <th data-options="field:'price'">价格</th>   
</tr>   
    </thead>   
    <tbody>   
<tr>   
    <td>001</td><td>张三</td><td>100.00$</td>   
</tr>   
<tr>   
    <td>002</td><td>李四</td><td>120.00$</td>   
</tr>   
    </tbody>   
</table>

在表格内使用<th>标签定义列,通过<table>标签创建DataGrid控件,具体代码如下:

<table class="easyui-datagrid" style="width:400px;height:250px"   
data-options="url:'datagrid_data.action',fitColumns:true,singleSelect:true">   
    <thead>   
<tr>   
    <th data-options="field:'code',width:100">编码</th>   
    <th data-options="field:'name',width:100">姓名</th>   
    <th data-options="field:'price',width:100,align:'right'">价格</th>   
</tr>   
    </thead>   
</table>

使用Jquery创建DataGrid控件,具体代码如下:

<table id="yoodb"></table>

$('#yoodb').datagrid({    
    url:'datagrid_data.action',    
    columns:[[    
{field:'code',title:'编码',width:100},    
{field:'name',title:'姓名',width:100},    
{field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});

如果使用部分参数进行查询数据,如下:

$('#yoodb').datagrid('load', {    
    name: 'www.yoodb.com',    
    price: '200'   
});

更新数据保存到服务器之后刷新当前页面,代码如下:

$('#yoodb').datagrid('reload');    // 重新载入当前页面数据

常用参数含义如下:

fitColumns  默认属性为false,真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动

singleSelect 默认属性为false,如果为true,则只允许选择一行

formatter

单元格formatter(格式化器)函数,带3个参数:

value:字段值。

rowData:行记录数据。

rowIndex: 行索引。

具体使用方式代码如下:

$('#yoodb').datagrid({
	url:'datagrid_data.action',
	columns:[[
		{field:'userId',title:'姓名', width:100,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

title    列标题文本。

field    列字段名称。

width    列的宽度。如果没有定义,宽度将自动扩充以适应其内容。

sortable 如果为true,则允许列使用排序。

order    默认排序数序,只能是'asc'或'desc'。

fixed    如果为true,在"fitColumns"设置为true的时候阻止其自适应宽度。

editor 指明编辑类型。

当字符串指明编辑类型的时候,对象包含2个属性:

type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。

options:对象,object, 该编辑器属性对应于编辑类型。

~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信