EasyUI Datagrid 数据网格
2017-10-03 18:58
453 查看
网络示例一:
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
panel
resizable
linkbutton
pagination
从已有的表格元素创建数据网格(datagrid),在 html 中定义列、行及数据。
通过 <table> 标记创建数据网格(datagrid)。嵌套的 <th> 标签定义表格中的列。
也可以使用 javascript 创建数据网格(datagrid)。
通过一些参数查询数据。
在向服务器改变数据之后,更新前台数据。
该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性。
数据网格(DataGrid) 的列(Column)是一个数组对象,它的每个元素也是一个数组。元素数组的元素是一个配置对象,它定义了每个列的字段。
代码实例:
通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。
每个编辑器有下列行为:
例如,文本编辑器(text editor)定义如下:
通过 $.fn.datagrid.defaults.view 重写默认的 defaults。
视图(view)是一个对象,它告诉数据网格(datagrid)如何呈现行。该对象必须定义下列函数:
该事件扩展自面板(panel),下面是为数据网格(datagrid)添加的事件。
网络示例二:
在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid。代码如下:
页面上的div标签:
js代码:
datagrid在创建完成后会根据url请求数据,这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据,如果用到分页,还需要有total属性:
说到ajax请求,难免需要在请求的时候传入一些查询条件,我通常是在onBeforeLoad事件中添加查询条件的:
如果要启用分页,在datagrid配置中,首先要加入如下配置:
这样一来我们的datagrid底部就会出现一个分页工具栏。
这个时侯,datagrid在请求数据的时候会自动的添加分页的信息:
page:当前请求的页码
rows:每页要显示的行数
在服务器端获取到这两个参数值,然后通过获取数据库中的总数据行数来完成数据处理。
上面的js代码创建的datagrid本身已经添加了checkbox列,就是第一列。checkbox列将会自适应宽度。
rownumber列的配置是在全局设置的,如果设置为true则会添加一列来显示行号。
datagrid本身提供了行编辑的功能。只需要两个步骤:
设置列的editor属性
手动触发编辑
第一步,我们需要在column配置中指明editor,editor有两个属性,type和options,有效的type字符串有:
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
options则对应这些控件的具体配置,包括事件等。
如果不需要特殊的options配置,直接将type字符串赋给editor即可。
第二步,我们需要监听datagrid的onRowClick事件,或者onCellClick事件,我更愿意监听onCellClick事件,可以根据点击不同的字段来进入编辑模式,并设置单元格编辑控件的focus。
这里调用了beginEditing方法:
在列的配种中设置formatter
cardView效果是这样的:
cardView的代码:
cardView其实是使用了datagrid的view配置,重写了其默认的renderRow方法。基于这种实现,我们可以显示更多样式的view。
网络示例三:
plain copy
print?
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
1:生明一个Table
[html] view
plain copy
print?
<table id="dg">
</table>
2:在Js中实现
[javascript] view
plain copy
print?
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
上边的只是参考帮助文档的创建方式,下面将结合前后台对具体的内容进行实现
项目的后台使用的是SpringMvc,数据库是Mybaits
plain copy
print?
datagrid=$("#dg").datagrid({
url:"/Test3/ModuleBeanController/getAll.do",//加载的URL
isField:"id",
pagination:true,//显示分页
pageSize:5,//分页大小
pageList:[5,10,15,20],//每页的个数
fit:true,//自动补全
fitColumns:true,
iconCls:"icon-save",//图标
title:"用户管理",
columns:[[ //每个列具体内容
{
field:'id',
title:'id',
width:100,
},
{field:'pid',title:'pid',width:100},
{field:'text',title:'text',width:100}
]]
})
plain copy
print?
@RequestMapping(value="/getAll")
@ResponseBody
public List<ModuleBean> getAll(String page,String rows,String text) {
return moduleBeanService.getAll(page,rows,text);
}
介绍一下几个参数
page:页数
rows:每页行数
Text:在以后的通过用户名查询时使用
[java] view
plain copy
print?
@Override
public List<ModuleBean> getAll(String page,String rows,String text) {
// TODO Auto-generated method stub
page = (page==null?"1":page);
rows = (rows==null?"5":rows);
return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));
}
pageUtil相关代码
[java] view
plain copy
print?
package com.sc.util;
import java.util.HashMap;
import java.util.Map;
public class PageUtil {
public static Map<String,Object> getRowNum(int curPage,int pageSize,String text)
{
Map<String,Object> map=new HashMap<String,Object>();
map.put("curRow", (curPage-1)*pageSize);
map.put("pageSize", pageSize);
if(text!=null)
{
map.put("text", "%"+text+"%");
}
else
{
map.put("text", "%%");
}
return map;
}
}
[html] view
plain copy
print?
<select id="getAll" resultMap="BaseResultMap" parameterType="map">
select * from tbl_sys_module
<if test="#{text} != '%%'">
where TEXT like #{text,jdbcType=VARCHAR}
</if>
limit #{curRow},#{pageSize}
</select>
就是一个查询语句select * from 表 where Text like #{text} limit rows,page
通过map返回
plain copy
print?
var datagrid;
var rowEditor=undefined;
$(function(){
datagrid=$("#dg").datagrid({
url:"/Test3/ModuleBeanController/getAll.do",//加载的URL
isField:"id",
pagination:true,//显示分页
pageSize:5,//分页大小
pageList:[5,10,15,20],//每页的个数
fit:true,//自动补全
fitColumns:true,
iconCls:"icon-save",//图标
title:"用户管理",
columns:[[ //每个列具体内容
{
field:'id',
title:'id',
width:100,
editor : {//是否可编辑
type : 'validatebox',
options : {//必须校验
required : true
}
}
},
{field:'pid',title:'pid',width:100,editor : {
type : 'validatebox',
options : {
required : true
}
}},
{field:'text',title:'text',width:100,editor : {
type : 'validatebox',
options : {
required : true
}
}}
]],
toolbar:[ //工具条
{text:"增加",iconCls:"icon-add",handler:function(){//回调函数
if(rowEditor==undefined)
{
datagrid.datagrid('insertRow',{//如果处于未被点击状态,在第一行开启编辑
index: 0,
row: {
}
});
rowEditor=0;
datagrid.datagrid('beginEdit',rowEditor);//没有这行,即使开启了也不编辑
}
}},
{text:"删除",iconCls:"icon-remove",handler:function(){
var rows=datagrid.datagrid('getSelections');
if(rows.length<=0)
{
$.messager.alert('警告','您没有选择','error');
}
else if(rows.length>1)
{
$.messager.alert('警告','不支持批量删除','error');
}
else
{
$.messager.confirm('确定','您确定要删除吗',function(t){
if(t)
{
$.ajax({
url : '/Test3/ModuleBeanController/deletecustomer.do',
data : rows[0],
dataType : 'json',
success : function(r) {
if (r.success) {
datagrid.datagrid('acceptChanges');
$.messager.show({
msg : r.msg,
title : '成功'
});
editRow = undefined;
datagrid.datagrid('reload');
} else {
/*datagrid.datagrid('rejectChanges');*/
datagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
datagrid.datagrid('unselectAll');
}
});
}
})
}
}},
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows=datagrid.datagrid('getSelections');
if(rows.length==1)
{
if(rowEditor==undefined)
{
var index=datagrid.datagrid('getRowIndex',rows[0]);
rowEditor=index;
datagrid.datagrid('unselectAll');
datagrid.datagrid('beginEdit',index);
}
}
}},
{text:"查询",iconCls:"icon-search",handler:function(){}},
{text:"保存",iconCls:"icon-save",handler:function(){
datagrid.datagrid('endEdit',rowEditor);
rowEditor=undefined;
}},
{text:"取消编辑",iconCls:"icon-redo",handler:function(){
rowEditor=undefined;
datagrid.datagrid('rejectChanges')
}}
],
onAfterEdit:function(rowIndex, rowData, changes){
var inserted = datagrid.datagrid('getChanges', 'inserted');
var updated = datagrid.datagrid('getChanges', 'updated');
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = '/Test3/ModuleBeanController/addcustomer.do';
}
if (updated.length > 0) {
url = '/Test3/ModuleBeanController/addcustomer.do';
}
$.ajax({
url : url,
data : rowData,
dataType : 'json',
success : function(r) {
if (r.success) {
datagrid.datagrid('acceptChanges');
$.messager.show({
msg : r.msg,
title : '成功'
});
editRow = undefined;
datagrid.datagrid('reload');
} else {
/*datagrid.datagrid('rejectChanges');*/
datagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
datagrid.datagrid('unselectAll');
}
});
},
onDblClickCell:function(rowIndex, field, value){
if(rowEditor==undefined)
{
datagrid.datagrid('beginEdit',rowIndex);
rowEditor=rowIndex;
}
}
});
$("#search").click(function(){
datagrid.datagrid('load',{
text:$("#text").val()
});
});
})
plain copy
print?
package com.sc.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sc.myservice.ModuleBeanService;
import com.sc.po.Menu;
import com.sc.po.ModuleBean;
@Controller
@RequestMapping("ModuleBeanController")
public class ModuleBeanController {
private ModuleBeanService moduleBeanService;
public ModuleBeanService getModuleBeanService() {
return moduleBeanService;
}
@Autowired
public void setModuleBeanService(ModuleBeanService moduleBeanService) {
this.moduleBeanService = moduleBeanService;
}
@RequestMapping(value="/{id}/showModuleBean" ,params="json")
@ResponseBody
public ModuleBean showModuleBean(@PathVariable String id) {
Integer key=Integer.parseInt(id);
ModuleBean moduleBean=moduleBeanService.searchByPrimaryKey(key);
return moduleBean;
}
@RequestMapping(value="/getAll")
@ResponseBody
public List<ModuleBean> getAll(String page,String rows,String text) {
return moduleBeanService.getAll(page,rows,text);
}
@RequestMapping(value="/getMenu")
@ResponseBody
public List<Menu> getMenu(String id) {
if(id==null)
return moduleBeanService.searchByPrimaryPid(-1);
else
return moduleBeanService.searchByPrimaryPid(Integer.parseInt(id));
}
@RequestMapping("/addcustomer")
@ResponseBody
public Map<String,Object> addCustomer(ModuleBean moduleBean) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.save(moduleBean);
map.put("success", result);
return map;
}
@RequestMapping("/upadatacustomer")
@ResponseBody
public Map<String,Object> upadataCustomer(ModuleBean moduleBean) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.updateByPrimaryKey(moduleBean);
map.put("success", result);
return map;
}
@RequestMapping("/deletecustomer")
@ResponseBody
public Map<String,Object> deleteCustomer(String ids) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.deleteByPrimaryKey(Integer.parseInt(ids));
map.put("success", result);
return map;
}
}
plain copy
print?
package com.sc.myservice.impl;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sc.dao.ModuleBeanMapper;
import com.sc.myservice.ModuleBeanService;
import com.sc.po.Menu;
import com.sc.po.ModuleBean;
import com.sc.util.PageUtil;
@Service("moduleBeanService")
public class ModuleBeanServiceImpl implements ModuleBeanService {
private ModuleBeanMapper modulebeanmapper;
public ModuleBeanMapper getModulebeanmapper() {
return modulebeanmapper;
}
@Autowired
public void setModulebeanmapper(ModuleBeanMapper modulebeanmapper) {
this.modulebeanmapper = modulebeanmapper;
}
@Override
public ModuleBean searchByPrimaryKey(int kay) {
ModuleBean moduleBean=modulebeanmapper.selectByPrimaryKey(kay);
// TODO Auto-generated method stub
return moduleBean;
}
@Override
public int save(ModuleBean moduleBean) {
// TODO Auto-generated method stub
return modulebeanmapper.insert(moduleBean);
}
@Override
public List<ModuleBean> getAll(String page,String rows,String text) {
// TODO Auto-generated method stub
page = (page==null?"1":page);
rows = (rows==null?"5":rows);
return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));
}
@Override
public int updateByPrimaryKey(ModuleBean record) {
// TODO Auto-generated method stub
return modulebeanmapper.updateByPrimaryKey(record);
}
@Override
public int deleteByPrimaryKey(Integer id) {
// TODO Auto-generated method stub
return modulebeanmapper.deleteByPrimaryKey(id);
}
@Override
public List<Menu> searchByPrimaryPid(int pid) {
// TODO Auto-generated method stub
List<Menu> menulist=new ArrayList<Menu>();
List<ModuleBean> beanlist=modulebeanmapper.selectByPrimaryPid(pid);
if(beanlist!=null)
{
Menu menu=new Menu();
for(ModuleBean b:beanlist)
{
BeanUtils.copyProperties(b, menu);
if(b.getState()==1)
{
menu.setState("closed");
}
menulist.add(menu);
}
}
return menulist;
}
}
plain copy
print?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sc.dao.ModuleBeanMapper" >
<resultMap id="BaseResultMap" type="com.sc.po.ModuleBean" >
<id column="ID" property="id" jdbcType="INTEGER" />
<result column="PID" property="pid" jdbcType="INTEGER" />
<result column="TEXT" property="text" jdbcType="VARCHAR" />
<result column="ICONCLS" property="iconcls" jdbcType="VARCHAR" />
<result column="SRC" property="src" jdbcType="VARCHAR" />
<result column="SEQ" property="seq" jdbcType="INTEGER" />
<result column="IS_MENU" property="isMenu" jdbcType="INTEGER" />
<result column="STATE" property="state" jdbcType="INTEGER" />
</resultMap>
<sql id="Base_Column_List" >
ID, PID, TEXT, ICONCLS, SRC, SEQ, IS_MENU, STATE
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select
<include refid="Base_Column_List" />
from tbl_sys_module
where ID = #{id,jdbcType=INTEGER}
</select>
<select id="selectByPrimaryPid" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select * from tbl_sys_module
where PID = #{pid,jdbcType=INTEGER}
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
delete from tbl_sys_module
where ID = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.sc.po.ModuleBean" >
insert into tbl_sys_module (ID, PID, TEXT,
ICONCLS, SRC, SEQ,
IS_MENU, STATE)
values (#{id,jdbcType=INTEGER}, #{pid,jdbcType=INTEGER}, #{text,jdbcType=VARCHAR},
#{iconcls,jdbcType=VARCHAR}, #{src,jdbcType=VARCHAR}, #{seq,jdbcType=INTEGER},
#{isMenu,jdbcType=INTEGER}, #{state,jdbcType=INTEGER})
</insert>
<insert id="insertSelective" parameterType="com.sc.po.ModuleBean" >
insert into tbl_sys_module
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
ID,
</if>
<if test="pid != null" >
PID,
</if>
<if test="text != null" >
TEXT,
</if>
<if test="iconcls != null" >
ICONCLS,
</if>
<if test="src != null" >
SRC,
</if>
<if test="seq != null" >
SEQ,
</if>
<if test="isMenu != null" >
IS_MENU,
</if>
<if test="state != null" >
STATE,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=INTEGER},
</if>
<if test="pid != null" >
#{pid,jdbcType=INTEGER},
</if>
<if test="text != null" >
#{text,jdbcType=VARCHAR},
</if>
<if test="iconcls != null" >
#{iconcls,jdbcType=VARCHAR},
</if>
<if test="src != null" >
#{src,jdbcType=VARCHAR},
</if>
<if test="seq != null" >
#{seq,jdbcType=INTEGER},
</if>
<if test="isMenu != null" >
#{isMenu,jdbcType=INTEGER},
</if>
<if test="state != null" >
#{state,jdbcType=INTEGER},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.sc.po.ModuleBean" >
update tbl_sys_module
<set >
<if test="pid != null" >
PID = #{pid,jdbcType=INTEGER},
</if>
<if test="text != null" >
TEXT = #{text,jdbcType=VARCHAR},
</if>
<if test="iconcls != null" >
ICONCLS = #{iconcls,jdbcType=VARCHAR},
</if>
<if test="src != null" >
SRC = #{src,jdbcType=VARCHAR},
</if>
<if test="seq != null" >
SEQ = #{seq,jdbcType=INTEGER},
</if>
<if test="isMenu != null" >
IS_MENU = #{isMenu,jdbcType=INTEGER},
</if>
<if test="state != null" >
STATE = #{state,jdbcType=INTEGER},
</if>
</set>
where ID = #{id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.sc.po.ModuleBean" >
update tbl_sys_module
set PID = #{pid,jdbcType=INTEGER},
TEXT = #{text,jdbcType=VARCHAR},
ICONCLS = #{iconcls,jdbcType=VARCHAR},
SRC = #{src,jdbcType=VARCHAR},
SEQ = #{seq,jdbcType=INTEGER},
IS_MENU = #{isMenu,jdbcType=INTEGER},
STATE = #{state,jdbcType=INTEGER}
where ID = #{id,jdbcType=INTEGER}
</update>
<select id="getAll" resultMap="BaseResultMap" parameterType="map">
select * from tbl_sys_module
<if test="#{text} != '%%'">
where TEXT like #{text,jdbcType=VARCHAR}
</if>
limit #{curRow},#{pageSize}
</select>
</mapper>
效果截图
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
依赖
panelresizable
linkbutton
pagination
用法
从已有的表格元素创建数据网格(datagrid),在 html 中定义列、行及数据。<table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table>
通过 <table> 标记创建数据网格(datagrid)。嵌套的 <th> 标签定义表格中的列。
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table>
也可以使用 javascript 创建数据网格(datagrid)。
<table id="dg"></table>
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] });
通过一些参数查询数据。
$('#dg').datagrid('load', { name: 'easyui', address: 'ho' });
在向服务器改变数据之后,更新前台数据。
$('#dg').datagrid('reload'); // reload the current page data
数据网格(DataGrid)属性
该属性扩展自面板(panel),下面是为数据网格(datagrid)添加的属性。名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
columns | array | 数据网格(datagrid)的列(column)的配置对象,更多细节请参见列(column)属性。 | undefined |
frozenColumns | array | 和列(column)属性一样,但是这些列将被冻结在左边。 | undefined |
fitColumns | boolean | 设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。 | false |
resizeHandle | string | 调整列的位置,可用的值有:'left'、'right'、'both'。当设置为 'right' 时,用户可通过拖拽列头部的右边缘来调整列。 该属性自版本 1.3.2 起可用。 | right |
autoRowHeight | boolean | 定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能。 | true |
toolbar | array,selector | 数据网格(datagrid)面板的头部工具栏。可能的值: 1、数组,每个工具选项与链接按钮(linkbutton)一样。 2、选择器,只是工具栏。 在 <div> 标签内定义工具栏: $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> </div> 通过数组定义工具栏: $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] }); | null |
striped | boolean | 设置为 true,则把行条纹化。(即奇偶行使用不同背景色) | false |
method | string | 请求远程数据的方法(method)类型。 | post |
nowrap | boolean | 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 | true |
idField | string | 指示哪个字段是标识字段。 | null |
url | string | 从远程站点请求数据的 URL。 | null |
data | array,object | 要加载的数据。该属性自版本 1.3.2 起可用。 代码实例: $('#dg').datagrid({ data: [ {f1:'value11', f2:'value12'}, {f1:'value21', f2:'value22'} ] }); | null |
loadMsg | string | 当从远程站点加载数据时,显示的提示消息。 | Processing, please wait … |
pagination | boolean | 设置为 true,则在数据网格(datagrid)底部显示分页工具栏。 | false |
rownumbers | boolean | 设置为 true,则显示带有行号的列。 | false |
singleSelect | boolean | 设置为 true,则只允许选中一行。 | false |
checkOnSelect | boolean | 如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。如果设置为 false 时,只有当用户点击了复选框时,才会选中/取消选中复选框。 该属性自版本 1.3 起可用。 | true |
selectOnCheck | boolean | 如果设置为 true,点击复选框将会选中该行。如果设置为 false,选中该行将不会选中复选框。 该属性自版本 1.3 起可用。 | true |
pagePosition | string | 定义分页栏的位置。可用的值有:'top'、'bottom'、'both'。 该属性自版本 1.3 起可用。 | bottom |
pageNumber | number | 当设置了 pagination 属性时,初始化页码。 | 1 |
pageSize | number | 当设置了 pagination 属性时,初始化页面尺寸。 | 10 |
pageList | array | 当设置了 pagination 属性时,初始化页面尺寸的选择列表。 | [10,20,30,40,50] |
queryParams | object | 当请求远程数据时,发送的额外参数。 代码实例: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } }); | {} |
sortName | string | 定义可以排序的列。 | null |
sortOrder | string | 定义列的排序顺序,只能用 'asc' 或 'desc'。 | asc |
multiSort | boolean | 定义是否启用多列排序。该属性自版本 1.3.4 起可用。 | false |
remoteSort | boolean | 定义是否从服务器排序数据。 | true |
showHeader | boolean | 定义是否显示行的头部。 | true |
showFooter | boolean | 定义是否显示行的底部。 | false |
scrollbarSize | number | 滚动条宽度(当滚动条是垂直的时候)或者滚动条的高度(当滚动条是水平的时候)。 | 18 |
rowStyler | function | 返回例如 'background:red' 的样式。该函数需要两个参数: rowIndex:行的索引,从 0 开始。 rowData:该行相应的记录。 代码实例: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; // return inline style // the function can return predefined css class and inline style // return {class:'r1', style:{'color:#fff'}}; } } }); | |
loader | function | 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数: param:要传递到远程服务器的参数对象。 success(data):当检索数据成功时调用的回调函数。 error():当检索数据失败时调用的回调函数。 | json loader |
loadFilter | function | 返回要显示的过滤数据。该函数有一个参数 'data' ,表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象,含有 'total' 和 'rows' 属性。 代码实例: // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } }); | |
editors | object | 定义编辑行时的编辑器。 | predefined editors |
view | object | 定义数据网格(datagrid)的视图。 | default view |
列(Column)属性
数据网格(DataGrid) 的列(Column)是一个数组对象,它的每个元素也是一个数组。元素数组的元素是一个配置对象,它定义了每个列的字段。代码实例:
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} ]]
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 列的标题文本。 | undefined |
field | string | 列的字段名。 | undefined |
width | number | 列的宽度。如果未定义,则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能。 | undefined |
rowspan | number | 指示一个单元格占据多少行。 | undefined |
colspan | number | 指示一个单元格占据多少列。 | undefined |
align | string | 指示如何对齐该列的数据,可以用 'left'、'right'、'center'。 | undefined |
halign | string | 指示如何对齐该列的头部,可能的值:'left'、'right'、'center'。如果没有分配值,则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。 | undefined |
sortable | boolean | 设置为 true,则允许该列被排序。 | undefined |
order | string | 默认的排序顺序,只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。 | undefined |
resizable | boolean | 设置为 true,则允许该列可调整尺寸。 | undefined |
fixed | boolean | 设置为 true,则当 'fitColumns' 设置为 true 时放置调整宽度。 | undefined |
hidden | boolean | 设置为 true,则隐藏该列。 | undefined |
checkbox | boolean | 设置为 true,则显示复选框。复选框有固定宽度。 | undefined |
formatter | function | 单元格的格式化函数,需要三个参数: value:字段的值。 rowData:行的记录数据。 rowIndex:行的索引。 代码实例: $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] }); | undefined |
styler | function | 单元格的样式函数,返回样式字符串来自定义该单元格的样式,例如 'background:red' 。该函数需要三个参数: value:字段的值。 rowData:行的记录数据。 rowIndex:行的索引。 代码实例: $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'background-color:#ffee00;color:red;'; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'} } } } ]] }); | undefined |
sorter | function | 用于本地排序的自定义字段的排序函数,需要两个参数: a:第一个字段值。 b:第二个字段值。 代码实例: $('#dg').datagrid({ remoteSort: false, columns: [[ {field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a[2] == b[2]){ if (a[0] == b[0]){ return (a[1]>b[1]?1:-1); } else { return (a[0]>b[0]?1:-1); } } else { return (a[2]>b[2]?1:-1); } } } ]] }); | undefined |
editor | string,object | 指示编辑类型。当是字符串(string)时则指编辑类型,当是对象(object)时则包含两个属性: type:字符串,编辑类型,可能的类型:text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 options:对象,编辑类型对应的编辑器选项。 | undefined |
编辑器(Editor)
通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。每个编辑器有下列行为:
名称 | 参数 | 描述 |
---|---|---|
init | container, options | 初始化编辑器并且返回目标对象。 |
destroy | target | 如果必要就销毁编辑器。 |
getValue | target | 从编辑器的文本获取值。 |
setValue | target , value | 给编辑器设置值。 |
resize | target , width | 如果必要就调整编辑器的尺寸。 |
$.extend($.fn.datagrid.defaults.editors, { text: { init: function(container, options){ var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); return input; }, destroy: function(target){ $(target).remove(); }, getValue: function(target){ return $(target).val(); }, setValue: function(target, value){ $(target).val(value); }, resize: function(target, width){ $(target)._outerWidth(width); } } });
数据网格视图(DataGrid View)
通过 $.fn.datagrid.defaults.view 重写默认的 defaults。视图(view)是一个对象,它告诉数据网格(datagrid)如何呈现行。该对象必须定义下列函数:
名称 | 参数 | 描述 |
---|---|---|
render | target, container, frozen | 当数据加载时调用。 target:DOM 对象,数据网格(datagrid)对象。 container:行的容器。 frozen:指示是否呈现冻结容器。 |
renderFooter | target, container, frozen | 这是呈现行脚的选项函数。 |
renderRow | target, fields, frozen, rowIndex, rowData | 这是将会被 render 函数调用的选项函数。 |
refreshRow | target, rowIndex | 定义如何刷新指定的行。 |
onBeforeRender | target, rows | 视图被呈现前触发。 |
onAfterRender | target | 视图被呈现后触发。 |
事件
该事件扩展自面板(panel),下面是为数据网格(datagrid)添加的事件。名称 | 参数 | 描述 |
---|---|---|
onLoadSuccess | data | 当数据加载成功时触发。 |
onLoadError | none | 加载远程数据发生某些错误时触发。 |
onBeforeLoad | param | 发送加载数据的请求前触发,如果返回 false 加载动作就会取消。 |
onClickRow | rowIndex, rowData | 当用户点击一行时触发,参数包括: rowIndex:被点击行的索引,从 0 开始 rowData:被点击行对应的记录 |
onDblClickRow | rowIndex, rowData | 当用户双击一行时触发,参数包括: rowIndex:被双击行的索引,从 0 开始 rowData:被双击行对应的记录 |
onClickCell | rowIndex, field, value | 当用户单击一个单元格时触发。 |
onDblClickCell | rowIndex, field, value | 当用户双击一个单元格时触发。 代码实例: // when double click a cell, begin editing and make the editor get focus $('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } }); |
onSortColumn | sort, order | 当用户对一列进行排序时触发,参数包括: sort:排序的列的字段名 order:排序的列的顺序 |
onResizeColumn | field, width | 当用户调整列的尺寸时触发。 |
onSelect | rowIndex, rowData | 当用户选中一行时触发,参数包括: rowIndex:选中行的索引,从 0 开始 rowData:选中行对应的记录 |
onUnselect | rowIndex, rowData | 当用户取消选中一行时触发,参数包括: rowIndex:取消选中行的索引,从 0 开始 rowData:取消选中行对应的记录 |
onSelectAll | rows | 当用户选中全部行时触发。 |
onUnselectAll | rows | 当用户取消选中全部行时触发。 |
onCheck | rowIndex,rowData | 当用户勾选一行时触发,参数包括: rowIndex:勾选行的索引,从 0 开始 rowData:勾选行对应的记录 该事件自版本 1.3 起可用。 |
onUncheck | rowIndex,rowData | 当用户取消勾选一行时触发,参数包括: rowIndex:取消勾选行的索引,从 0 开始 rowData:取消勾选行对应的记录 该事件自版本 1.3 起可用。 |
onCheckAll | rows | 当用户勾选全部行时触发。该事件自版本 1.3 起可用。 |
onUncheckAll | rows | 当用户取消勾选全部行时触发。该事件自版本 1.3 起可用。 |
onBeforeEdit | rowIndex, rowData | 当用户开始编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始 rowData:编辑行对应的记录 |
onAfterEdit | rowIndex, rowData, changes | 当用户完成编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始 rowData:编辑行对应的记录 changes:更改的字段/值对 |
onCancelEdit | rowIndex, rowData | 当用户取消编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始 rowData:编辑行对应的记录 |
onHeaderContextMenu | e, field | 当数据网格(datagrid)的头部被右键单击时触发。 |
onRowContextMenu | e, rowIndex, rowData | 当右键点击行时触发。 |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
getPager | none | 返回分页(pager)对象。 |
getPanel | none | 返回面板(panel)对象。 |
getColumnFields | frozen | 返回列的字段,如果 frozen 设置为 true,则冻结列的字段被返回。 代码实例: var opts = $('#dg').datagrid('getColumnFields'); // get unfrozen columns var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns |
getColumnOption | field | 返回指定列的选项。 |
resize | param | 调整尺寸和布局。 |
load | param | 加载并显示第一页的行,如果指定 'param' 参数,它将替换 queryParams 属性。通常情况下,通过传递一些从参数进行查询,该方法被调用来从服务器加载新数据。$('#dg').datagrid('load',{ code: '01', name: 'name01' }); |
reload | param | 重新加载行,就像 load 方法一样,但是保持在当前页。 |
reloadFooter | footer | 重新加载底部的行。代码实例:// update footer row values and then refresh var rows = $('#dg').datagrid('getFooterRows'); rows[0]['name'] = 'new name'; rows[0]['salary'] = 60000; $('#dg').datagrid('reloadFooter'); // update footer rows with new data $('#dg').datagrid('reloadFooter',[ {name: 'name1', salary: 60000}, {name: 'name2', salary: 65000} ]); |
loading | none | 显示正在加载状态。 |
loaded | none | 隐藏正在加载状态。 |
fitColumns | none | 使列自动展开/折叠以适应数据网格(datagrid)的宽度。 |
fixColumnSize | field | 固定列的尺寸。如果 'field' 参数未设置,所有的列的尺寸将是固定的。 代码实例: $('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size $('#dg').datagrid('fixColumnSize'); // fix all columns size |
fixRowHeight | index | 固定指定行的高度。如果 'index' 参数未设置,所有的行的高度将是固定的。 |
freezeRow | index | 冻结指定的行,以便数据网格(datagrid)向下滚动时这些冻结行总是被显示在顶部。该方法自版本 1.3.2 起可用。 |
autoSizeColumn | field | 调整列的宽度以适应内容。该方法自版本 1.3 起可用。 |
loadData | data | 加载本地数据,旧的行会被移除。 |
getData | none | 返回加载的数据。 |
getRows | none | 返回当前页的行。 |
getFooterRows | none | 返回底部的行。 |
getRowIndex | row | 返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。 |
getChecked | none | 返回复选框选中的所有行。该方法自版本 1.3 起可用。 |
getSelected | none | 返回第一个选中的行或者 null。 |
getSelections | none | 返回所有选中的行,当没有选中的记录时,将返回空数组。 |
clearSelections | none | 清除所有的选择。 |
clearChecked | none | 清除所有勾选的行。该方法自版本 1.3.2 起可用。 |
scrollTo | index | 滚动到指定行。该方法自版本 1.3.3 起可用。 |
highlightRow | index | 高亮显示一行。该方法自版本 1.3.3 起可用。 |
selectAll | none | 选中当前页所有的行。 |
unselectAll | none | 取消选中当前页所有的行。 |
selectRow | index | 选中一行,行索引从 0 开始。 |
selectRecord | idValue | 通过传递 id 的值做参数选中一行。 |
unselectRow | index | 取消选中一行。 |
checkAll | none | 勾选当前页所有的行。该方法自版本 1.3 起可用。 |
uncheckAll | none | 取消勾选当前页所有的行。该方法自版本 1.3 起可用。 |
checkRow | index | 勾选一行,行索引从 0 开始。该方法自版本 1.3 起可用。 |
uncheckRow | index | 取消勾选一行,行索引从 0 开始。该方法自版本 1.3 起可用。 |
beginEdit | index | 开始对一行进行编辑。 |
endEdit | index | 结束对一行进行编辑。 |
cancelEdit | index | 取消对一行进行编辑。 |
getEditors | index | 获取指定行的编辑器。每个编辑器有下列属性: actions:编辑器能做的动作,与编辑器定义相同。 target:目标编辑器的 jQuery 对象。 field:字段名。 type:编辑器的类型,比如:'text'、'combobox'、'datebox',等等。 |
getEditor | options | 获取指定的编辑器, options 参数包含两个属性: index:行的索引。 field:字段名。 代码实例: // get the datebox editor and change its value var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012'); |
refreshRow | index | 刷新一行。 |
validateRow | index | 验证指定的行,有效时返回 true。 |
updateRow | param | 更新指定的行, param 参数包括下列属性: index:要更新的行的索引。 row:新的行数据。 代码实例: $('#dg').datagrid('updateRow',{ index: 2, row: { name: 'new name', note: 'new note message' } }); |
appendRow | row | 追加一个新行。新的行将被添加在最后的位置:$('#dg').datagrid('appendRow',{ name: 'new name', age: 30, note: 'some messages' }); |
insertRow | param | 插入一个新行, param 参数包括下列属性: index:插入进去的行的索引,如果没有定义,就追加该新行。 row:行的数据。 代码实例: // insert a new row at second row position $('#dg').datagrid('insertRow',{ index: 1, // index start with 0 row: { name: 'new name', age: 30, note: 'some messages' } }); |
deleteRow | index | 删除一行。 |
getChanges | type | 获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。当 type 参数没有分配时,返回所有改变的行。 |
acceptChanges | none | 提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。 |
rejectChanges | none | 回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。 |
mergeCells | options | 把一些单元格合并为一个单元格,options 参数包括下列特性: index:列的索引。 field:字段名。 rowspan:合并跨越的行数。 colspan:合并跨越的列数。 |
showColumn | field | 显示指定的列。 |
hideColumn | field | 隐藏指定的列。 |
创建datagrid
在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid。代码如下:页面上的div标签:
<div id="magazineGrid"> </div>
js代码:
$('#magazineGrid').datagrid({ height: 340, url: 'url', method: 'POST', queryParams: { 'id': id }, idField: '产品ID', striped: true, fitColumns: true, singleSelect: false, rownumbers: true, pagination: false, nowrap: false, pageSize: 10, pageList: [10, 20, 50, 100, 150, 200], showFooter: true, columns: [[ { field: 'ck', checkbox: true }, { field: '刊名', title: '刊名', width: 180, align: 'left' }, { field: '类别', title: '类别', width: 150, align: 'left' }, { field: '月份', title: '月份', width: 100, align: 'left' }, { field: '期次', title: '期次', width: 100, align: 'left' }, { field: '价格', title: '价格', width: 100, align: 'right' }, { field: '订阅数', title: '订阅数', width: 100, align: 'right' }, { field: '库存数', title: '库存数', width: 100, align: 'right' }, { field: '邮寄方式', title: '邮寄方式', width: 80, align: 'left' }, { field: '数量', title: '数量', width: 80, align: 'left', editor: { type: 'numberbox', options: { min: 0, precision: 0 } } } ]], onBeforeLoad: function (param) { }, onLoadSuccess: function (data) { }, onLoadError: function () { }, onClickCell: function (rowIndex, field, value) { } });
ajax请求返回的数据格式
datagrid在创建完成后会根据url请求数据,这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据,如果用到分页,还需要有total属性:var rst = new { total = iTotalCount, rows = entityList };
说到ajax请求,难免需要在请求的时候传入一些查询条件,我通常是在onBeforeLoad事件中添加查询条件的:
onBeforeLoad: function (param) { var bId = $("#txtBId").val(); var AllSearchKey = $("#txtAllSearchKey").val(); param.bId = bId; param.AllSearchKey = AllSearchKey; }
分页处理
如果要启用分页,在datagrid配置中,首先要加入如下配置:pagination: true,
这样一来我们的datagrid底部就会出现一个分页工具栏。
这个时侯,datagrid在请求数据的时候会自动的添加分页的信息:
page:当前请求的页码
rows:每页要显示的行数
在服务器端获取到这两个参数值,然后通过获取数据库中的总数据行数来完成数据处理。
关于checkbox列
上面的js代码创建的datagrid本身已经添加了checkbox列,就是第一列。checkbox列将会自适应宽度。{ field: 'ck', checkbox: true },
关于rownumber列
rownumber列的配置是在全局设置的,如果设置为true则会添加一列来显示行号。rownumbers: true
行编辑功能的实现
datagrid本身提供了行编辑的功能。只需要两个步骤:设置列的editor属性
手动触发编辑
第一步,我们需要在column配置中指明editor,editor有两个属性,type和options,有效的type字符串有:
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
options则对应这些控件的具体配置,包括事件等。
editor: { type: 'numberbox', options: { min: 0, precision: 0 } }
如果不需要特殊的options配置,直接将type字符串赋给editor即可。
editor:'text'
第二步,我们需要监听datagrid的onRowClick事件,或者onCellClick事件,我更愿意监听onCellClick事件,可以根据点击不同的字段来进入编辑模式,并设置单元格编辑控件的focus。
onClickCell: function (rowIndex, field, value) { beginEditing(rowIndex, field, value) }
这里调用了beginEditing方法:
var editIndex = undefined; var beginEditing = function (rowIndex, field, value) { if (field != "数量") return; if (rowIndex != editIndex) { if (endEditing()) { $('#magazineGrid').datagrid('beginEdit', rowIndex); editIndex = rowIndex; var ed = $('#magazineGrid').datagrid('getEditor', { index: rowIndex, field: '数量' }); $(ed.target).focus().bind('blur', function () { endEditing(); }); } else { $('#magazineGrid').datagrid('selectRow', editIndex); } } } var endEditing = function () { if (editIndex == undefined) { return true } if ($('#magazineGrid').datagrid('validateRow', editIndex)) { var ed = $('#magazineGrid').datagrid('getEditor', { index: editIndex, field: '数量' }); var number = $(ed.target).numberbox('getValue'); $('#magazineGrid').datagrid('getRows')[editIndex]['数量'] = number; $('#magazineGrid').datagrid('endEdit', editIndex); $('#magazineGrid').datagrid('selectRow', editIndex); editIndex = undefined; return true; } else { return false; } }
列格式化输出 formatter
在列的配种中设置formatterformatter: function (value, row, index) { if (row.user) { return row.user.name; } else { return value; } }
使用工具栏
toolbar: [{ text: 'Add', iconCls: 'icon-add', handler: function () { alert('add') } }, { text: 'Cut', iconCls: 'icon-cut', handler: function () { alert('cut') } }, '-', { text: 'Save', iconCls: 'icon-save', handler: function () { alert('save') } }],
使用CardView效果
cardView效果是这样的:cardView的代码:
var cardview = $.extend({}, $.fn.datagrid.defaults.view, { renderRow: function (target, fields, frozen, rowIndex, rowData) { var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">'); if (!frozen) { var aa = rowData.itemid.split('-'); var img = 'shirt' + aa[1] + '.gif'; cc.push('<img src="images/' + img + '" style="width:150px;float:left">'); cc.push('<div style="float:left;margin-left:20px;">'); for (var i = 0; i < fields.length; i++) { var copts = $(target).datagrid('getColumnOption', fields[i]); cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>'); } cc.push('</div>'); } cc.push('</td>'); return cc.join(''); } }); $(function () { $('#tt').datagrid({ view: cardview }); });
cardView其实是使用了datagrid的view配置,重写了其默认的renderRow方法。基于这种实现,我们可以显示更多样式的view。
网络示例三:
Datagride的初始化方式
方式1 :class类型创建,这个创建方式比较简单,如果在已知表格内容的情况下可以使用,还是挺漂亮的
[html] viewplain copy
print?
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
方式2:通过JavaScript方式创建,这种方式优势在于与后台的交互比较方便
1:生明一个Table
[html] viewplain copy
print?
<table id="dg">
</table>
2:在Js中实现
[javascript] viewplain copy
print?
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
上边的只是参考帮助文档的创建方式,下面将结合前后台对具体的内容进行实现
项目的后台使用的是SpringMvc,数据库是Mybaits
加载Url与Colum
1:前台JS
[html] viewplain copy
print?
datagrid=$("#dg").datagrid({
url:"/Test3/ModuleBeanController/getAll.do",//加载的URL
isField:"id",
pagination:true,//显示分页
pageSize:5,//分页大小
pageList:[5,10,15,20],//每页的个数
fit:true,//自动补全
fitColumns:true,
iconCls:"icon-save",//图标
title:"用户管理",
columns:[[ //每个列具体内容
{
field:'id',
title:'id',
width:100,
},
{field:'pid',title:'pid',width:100},
{field:'text',title:'text',width:100}
]]
})
2:后台的controller层
getAll.do
[java] viewplain copy
print?
@RequestMapping(value="/getAll")
@ResponseBody
public List<ModuleBean> getAll(String page,String rows,String text) {
return moduleBeanService.getAll(page,rows,text);
}
介绍一下几个参数
page:页数
rows:每页行数
Text:在以后的通过用户名查询时使用
3:service 层
getall()[java] view
plain copy
print?
@Override
public List<ModuleBean> getAll(String page,String rows,String text) {
// TODO Auto-generated method stub
page = (page==null?"1":page);
rows = (rows==null?"5":rows);
return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));
}
pageUtil相关代码
[java] view
plain copy
print?
package com.sc.util;
import java.util.HashMap;
import java.util.Map;
public class PageUtil {
public static Map<String,Object> getRowNum(int curPage,int pageSize,String text)
{
Map<String,Object> map=new HashMap<String,Object>();
map.put("curRow", (curPage-1)*pageSize);
map.put("pageSize", pageSize);
if(text!=null)
{
map.put("text", "%"+text+"%");
}
else
{
map.put("text", "%%");
}
return map;
}
}
4:mapper层
getall()[html] view
plain copy
print?
<select id="getAll" resultMap="BaseResultMap" parameterType="map">
select * from tbl_sys_module
<if test="#{text} != '%%'">
where TEXT like #{text,jdbcType=VARCHAR}
</if>
limit #{curRow},#{pageSize}
</select>
就是一个查询语句select * from 表 where Text like #{text} limit rows,page
通过map返回
我的js的全部内容
[javascript] viewplain copy
print?
var datagrid;
var rowEditor=undefined;
$(function(){
datagrid=$("#dg").datagrid({
url:"/Test3/ModuleBeanController/getAll.do",//加载的URL
isField:"id",
pagination:true,//显示分页
pageSize:5,//分页大小
pageList:[5,10,15,20],//每页的个数
fit:true,//自动补全
fitColumns:true,
iconCls:"icon-save",//图标
title:"用户管理",
columns:[[ //每个列具体内容
{
field:'id',
title:'id',
width:100,
editor : {//是否可编辑
type : 'validatebox',
options : {//必须校验
required : true
}
}
},
{field:'pid',title:'pid',width:100,editor : {
type : 'validatebox',
options : {
required : true
}
}},
{field:'text',title:'text',width:100,editor : {
type : 'validatebox',
options : {
required : true
}
}}
]],
toolbar:[ //工具条
{text:"增加",iconCls:"icon-add",handler:function(){//回调函数
if(rowEditor==undefined)
{
datagrid.datagrid('insertRow',{//如果处于未被点击状态,在第一行开启编辑
index: 0,
row: {
}
});
rowEditor=0;
datagrid.datagrid('beginEdit',rowEditor);//没有这行,即使开启了也不编辑
}
}},
{text:"删除",iconCls:"icon-remove",handler:function(){
var rows=datagrid.datagrid('getSelections');
if(rows.length<=0)
{
$.messager.alert('警告','您没有选择','error');
}
else if(rows.length>1)
{
$.messager.alert('警告','不支持批量删除','error');
}
else
{
$.messager.confirm('确定','您确定要删除吗',function(t){
if(t)
{
$.ajax({
url : '/Test3/ModuleBeanController/deletecustomer.do',
data : rows[0],
dataType : 'json',
success : function(r) {
if (r.success) {
datagrid.datagrid('acceptChanges');
$.messager.show({
msg : r.msg,
title : '成功'
});
editRow = undefined;
datagrid.datagrid('reload');
} else {
/*datagrid.datagrid('rejectChanges');*/
datagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
datagrid.datagrid('unselectAll');
}
});
}
})
}
}},
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows=datagrid.datagrid('getSelections');
if(rows.length==1)
{
if(rowEditor==undefined)
{
var index=datagrid.datagrid('getRowIndex',rows[0]);
rowEditor=index;
datagrid.datagrid('unselectAll');
datagrid.datagrid('beginEdit',index);
}
}
}},
{text:"查询",iconCls:"icon-search",handler:function(){}},
{text:"保存",iconCls:"icon-save",handler:function(){
datagrid.datagrid('endEdit',rowEditor);
rowEditor=undefined;
}},
{text:"取消编辑",iconCls:"icon-redo",handler:function(){
rowEditor=undefined;
datagrid.datagrid('rejectChanges')
}}
],
onAfterEdit:function(rowIndex, rowData, changes){
var inserted = datagrid.datagrid('getChanges', 'inserted');
var updated = datagrid.datagrid('getChanges', 'updated');
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = '/Test3/ModuleBeanController/addcustomer.do';
}
if (updated.length > 0) {
url = '/Test3/ModuleBeanController/addcustomer.do';
}
$.ajax({
url : url,
data : rowData,
dataType : 'json',
success : function(r) {
if (r.success) {
datagrid.datagrid('acceptChanges');
$.messager.show({
msg : r.msg,
title : '成功'
});
editRow = undefined;
datagrid.datagrid('reload');
} else {
/*datagrid.datagrid('rejectChanges');*/
datagrid.datagrid('beginEdit', editRow);
$.messager.alert('错误', r.msg, 'error');
}
datagrid.datagrid('unselectAll');
}
});
},
onDblClickCell:function(rowIndex, field, value){
if(rowEditor==undefined)
{
datagrid.datagrid('beginEdit',rowIndex);
rowEditor=rowIndex;
}
}
});
$("#search").click(function(){
datagrid.datagrid('load',{
text:$("#text").val()
});
});
})
2:controller层全部
[java] viewplain copy
print?
package com.sc.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sc.myservice.ModuleBeanService;
import com.sc.po.Menu;
import com.sc.po.ModuleBean;
@Controller
@RequestMapping("ModuleBeanController")
public class ModuleBeanController {
private ModuleBeanService moduleBeanService;
public ModuleBeanService getModuleBeanService() {
return moduleBeanService;
}
@Autowired
public void setModuleBeanService(ModuleBeanService moduleBeanService) {
this.moduleBeanService = moduleBeanService;
}
@RequestMapping(value="/{id}/showModuleBean" ,params="json")
@ResponseBody
public ModuleBean showModuleBean(@PathVariable String id) {
Integer key=Integer.parseInt(id);
ModuleBean moduleBean=moduleBeanService.searchByPrimaryKey(key);
return moduleBean;
}
@RequestMapping(value="/getAll")
@ResponseBody
public List<ModuleBean> getAll(String page,String rows,String text) {
return moduleBeanService.getAll(page,rows,text);
}
@RequestMapping(value="/getMenu")
@ResponseBody
public List<Menu> getMenu(String id) {
if(id==null)
return moduleBeanService.searchByPrimaryPid(-1);
else
return moduleBeanService.searchByPrimaryPid(Integer.parseInt(id));
}
@RequestMapping("/addcustomer")
@ResponseBody
public Map<String,Object> addCustomer(ModuleBean moduleBean) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.save(moduleBean);
map.put("success", result);
return map;
}
@RequestMapping("/upadatacustomer")
@ResponseBody
public Map<String,Object> upadataCustomer(ModuleBean moduleBean) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.updateByPrimaryKey(moduleBean);
map.put("success", result);
return map;
}
@RequestMapping("/deletecustomer")
@ResponseBody
public Map<String,Object> deleteCustomer(String ids) {
Map<String,Object> map = new HashMap<String,Object>();
int result = moduleBeanService.deleteByPrimaryKey(Integer.parseInt(ids));
map.put("success", result);
return map;
}
}
service层实现
[java] viewplain copy
print?
package com.sc.myservice.impl;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sc.dao.ModuleBeanMapper;
import com.sc.myservice.ModuleBeanService;
import com.sc.po.Menu;
import com.sc.po.ModuleBean;
import com.sc.util.PageUtil;
@Service("moduleBeanService")
public class ModuleBeanServiceImpl implements ModuleBeanService {
private ModuleBeanMapper modulebeanmapper;
public ModuleBeanMapper getModulebeanmapper() {
return modulebeanmapper;
}
@Autowired
public void setModulebeanmapper(ModuleBeanMapper modulebeanmapper) {
this.modulebeanmapper = modulebeanmapper;
}
@Override
public ModuleBean searchByPrimaryKey(int kay) {
ModuleBean moduleBean=modulebeanmapper.selectByPrimaryKey(kay);
// TODO Auto-generated method stub
return moduleBean;
}
@Override
public int save(ModuleBean moduleBean) {
// TODO Auto-generated method stub
return modulebeanmapper.insert(moduleBean);
}
@Override
public List<ModuleBean> getAll(String page,String rows,String text) {
// TODO Auto-generated method stub
page = (page==null?"1":page);
rows = (rows==null?"5":rows);
return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));
}
@Override
public int updateByPrimaryKey(ModuleBean record) {
// TODO Auto-generated method stub
return modulebeanmapper.updateByPrimaryKey(record);
}
@Override
public int deleteByPrimaryKey(Integer id) {
// TODO Auto-generated method stub
return modulebeanmapper.deleteByPrimaryKey(id);
}
@Override
public List<Menu> searchByPrimaryPid(int pid) {
// TODO Auto-generated method stub
List<Menu> menulist=new ArrayList<Menu>();
List<ModuleBean> beanlist=modulebeanmapper.selectByPrimaryPid(pid);
if(beanlist!=null)
{
Menu menu=new Menu();
for(ModuleBean b:beanlist)
{
BeanUtils.copyProperties(b, menu);
if(b.getState()==1)
{
menu.setState("closed");
}
menulist.add(menu);
}
}
return menulist;
}
}
mapper层
[html] viewplain copy
print?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sc.dao.ModuleBeanMapper" >
<resultMap id="BaseResultMap" type="com.sc.po.ModuleBean" >
<id column="ID" property="id" jdbcType="INTEGER" />
<result column="PID" property="pid" jdbcType="INTEGER" />
<result column="TEXT" property="text" jdbcType="VARCHAR" />
<result column="ICONCLS" property="iconcls" jdbcType="VARCHAR" />
<result column="SRC" property="src" jdbcType="VARCHAR" />
<result column="SEQ" property="seq" jdbcType="INTEGER" />
<result column="IS_MENU" property="isMenu" jdbcType="INTEGER" />
<result column="STATE" property="state" jdbcType="INTEGER" />
</resultMap>
<sql id="Base_Column_List" >
ID, PID, TEXT, ICONCLS, SRC, SEQ, IS_MENU, STATE
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select
<include refid="Base_Column_List" />
from tbl_sys_module
where ID = #{id,jdbcType=INTEGER}
</select>
<select id="selectByPrimaryPid" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select * from tbl_sys_module
where PID = #{pid,jdbcType=INTEGER}
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
delete from tbl_sys_module
where ID = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.sc.po.ModuleBean" >
insert into tbl_sys_module (ID, PID, TEXT,
ICONCLS, SRC, SEQ,
IS_MENU, STATE)
values (#{id,jdbcType=INTEGER}, #{pid,jdbcType=INTEGER}, #{text,jdbcType=VARCHAR},
#{iconcls,jdbcType=VARCHAR}, #{src,jdbcType=VARCHAR}, #{seq,jdbcType=INTEGER},
#{isMenu,jdbcType=INTEGER}, #{state,jdbcType=INTEGER})
</insert>
<insert id="insertSelective" parameterType="com.sc.po.ModuleBean" >
insert into tbl_sys_module
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
ID,
</if>
<if test="pid != null" >
PID,
</if>
<if test="text != null" >
TEXT,
</if>
<if test="iconcls != null" >
ICONCLS,
</if>
<if test="src != null" >
SRC,
</if>
<if test="seq != null" >
SEQ,
</if>
<if test="isMenu != null" >
IS_MENU,
</if>
<if test="state != null" >
STATE,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=INTEGER},
</if>
<if test="pid != null" >
#{pid,jdbcType=INTEGER},
</if>
<if test="text != null" >
#{text,jdbcType=VARCHAR},
</if>
<if test="iconcls != null" >
#{iconcls,jdbcType=VARCHAR},
</if>
<if test="src != null" >
#{src,jdbcType=VARCHAR},
</if>
<if test="seq != null" >
#{seq,jdbcType=INTEGER},
</if>
<if test="isMenu != null" >
#{isMenu,jdbcType=INTEGER},
</if>
<if test="state != null" >
#{state,jdbcType=INTEGER},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.sc.po.ModuleBean" >
update tbl_sys_module
<set >
<if test="pid != null" >
PID = #{pid,jdbcType=INTEGER},
</if>
<if test="text != null" >
TEXT = #{text,jdbcType=VARCHAR},
</if>
<if test="iconcls != null" >
ICONCLS = #{iconcls,jdbcType=VARCHAR},
</if>
<if test="src != null" >
SRC = #{src,jdbcType=VARCHAR},
</if>
<if test="seq != null" >
SEQ = #{seq,jdbcType=INTEGER},
</if>
<if test="isMenu != null" >
IS_MENU = #{isMenu,jdbcType=INTEGER},
</if>
<if test="state != null" >
STATE = #{state,jdbcType=INTEGER},
</if>
</set>
where ID = #{id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.sc.po.ModuleBean" >
update tbl_sys_module
set PID = #{pid,jdbcType=INTEGER},
TEXT = #{text,jdbcType=VARCHAR},
ICONCLS = #{iconcls,jdbcType=VARCHAR},
SRC = #{src,jdbcType=VARCHAR},
SEQ = #{seq,jdbcType=INTEGER},
IS_MENU = #{isMenu,jdbcType=INTEGER},
STATE = #{state,jdbcType=INTEGER}
where ID = #{id,jdbcType=INTEGER}
</update>
<select id="getAll" resultMap="BaseResultMap" parameterType="map">
select * from tbl_sys_module
<if test="#{text} != '%%'">
where TEXT like #{text,jdbcType=VARCHAR}
</if>
limit #{curRow},#{pageSize}
</select>
</mapper>
效果截图
相关文章推荐
- EasyUI Datagrid 数据网格
- Easyui Datagrid 数据网格---我的使用
- 关于easyui中datagrid数据网格与form表单的使用总结
- EasyUI-1.Datagrid 数据网格
- Easyui 数据网格详细视图(DataGrid DetailView)
- EasyUI DataGrid 数据网格
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
- 关于EasyUI Datagrid 数据网格使用策略
- js循环生成多个easyui datagrid数据网格时,初始化表格
- 关于EasyUI Datagrid 数据网格渲染数据过慢
- easyui_Datagrid 数据网格 loadData
- easyui datagrid-filter数据网格过滤的汉化
- easyui datagrid 显示已经在本地的数据
- jQuery easyui datagrid动态查询数据实例讲解
- easyui datagrid数据不显示
- easyui datagrid加载数据的两种方式
- easyui datagrid数据批量删除
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。
- easyui datagrid combobox 加载固定数据
- easyui datagrid中插入一行数据注意一点