这篇文章主要介绍了数据网格使用方法（重要),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1、将静态超文本标记语言渲染为数据网格样式
！-方式一：将静态超文本标记语言渲染为数据网格样式-
table class=easyui-datagrid
四羟乙基己二酰胺
tr
泰国(Thailand)数据选项=字段： id 编号/th
th data-options=field:name 姓名/th
th data-options=field:age 年龄/th
/tr
/thead
tbody
tr
td001/td
（美)财政部(财政部)小明/td
td90/td
/tr
tr
td002/td
（美)财政部(财政部)老王/td
td3/td
/tr
/tbody
/表格
2、发送创建交互式、快速动态网页应用的网页开发技术请求获取json数据创建数据网格提供json文件
！-方式二：发送创建交互式、快速动态网页应用的网页开发技术请求获取json数据创建数据网格-
表数据-选项= URL:“$ { pagecontext。请求。上下文路径}/JSON/datagrid _ data。JSON
class=easyui-datagrid
四羟乙基己二酰胺
tr
泰国(Thailand)数据选项=字段： id 编号/th
th data-options=field:name 姓名/th
th data-options=field:age 年龄/th
/tr
/thead
/表格
2、使用easyUI提供的应用程序接口创建数据网格（掌握)
！-方式三：使用easyUI提供的应用程序接口创建数据网格-
脚本类型=文本/javascript
$(function(){
//页面加载完成后，创建数据表格数据网格
$(#mytable ).数据网格({
//定义标题行所有的列
列：[[
{标题：编号，字段：“id”，复选框：true}，
{标题：姓名，字段："名称"},
{标题：年龄，字段："年龄"},
{标题：地址，字段："地址"}
]],
//指定数据表格发送创建交互式、快速动态网页应用的网页开发技术请求的地址
URL:“$ { pagecontext。请求。上下文路径}/JSON/datagrid _ data。JSON”，
行号：没错，
singleSelect:true，
//定义工具栏
工具栏：[
{文本：添加，iconCls:icon-add ，
//为按钮绑定单击事件
处理程序：函数(){
警报(添加.);
}
},
{文本：删除，iconCls:icon-remove}，
{文本：修改，iconCls:icon-edit}，
{文本：查询，iconCls:图标搜索 }
],
//显示分页条
分页：真
});
});
/脚本
如果数据表格中使用了分页条，要求服务端响应的json变为：
请求
响应：
3、案例：取派员分页查询
(1)页面调整
修改页面中数据网格的统一资源定位器地址
(2)服务端实现
分装分页相关属性
/**
* 通用分页查询方法
*/
公共void页面查询(页面bean页面bean){
int当前页面=页面bean。get current page()；
int pageSize=页面bean。获取pageSize()；
分离的标准分离的标准=页面bean。get detached criteria()；
//查询总计-总数据量
分离的标准。设置投影(投影。rowcount())；//指定冬眠框架发出结构化查询语言的形式-》select count(*)from BC _ staff；
list long计数list=(list long)this。gethibernatetemplate().findbyristeria(分离标准)；
长计数=计数列表。get(0)；
页面bean。设置总计(计数。int value())；
//查询行-当前页需要展示的数据集合
(3)分离的标准。设置投影(空);//指定冬眠框架发出结构化查询语言的形式-》选自*来自bc_staff
int first result=(当前页面-1)* pageSize；
int maxResults=pageSize
列表行=this。gethibernatetemplate().findbyrecurities(分离标准、第一结果、最大结果)；
pageBean.setRows(行);
}
//属性驱动，接收页面提交的分页参数
私有int页面；
私有（同Internationalorganizations）国际组织行；
/**
* 分页查询方法
* @抛出IOException
*/
公共字符串页面查询()引发IOException{
页面bean页面bean=新页面bean()；
页面bean。setcurrentpage(页面)；
pageBean.setPageSize(行数);
//创建离线提交查询对象
分离标准分离标准=分离标准。对于班级(工作人员。类)；
页面bean。setdetachedcriteria(分离的标准)；
员工服务。页面查询(页面bean)；
//使用json库将页面豆对象转为json，通过输出流写回页面中
//JSONObject -将单一对象转为json
//JSONArray -将数组或者集合对象转为json
JSON config JSON config=new JSON config()；
//指定哪些属性不需要转json
JSON配置。set excludes(new String[]{ current page ， detachedCriteria ， pageSize })；
字符串JSON=JSON对象。来自对象(页面bean，jsonConfig).toString()；
servletactioncontext . getresponse()。set content type( text/JSON；charset=utf-8 )；
servletactioncontext . getresponse()。getWriter()。打印(JSON)；
不返回；
}
批量删除派遣人员
dispatcher表中有一个删除标志deltag，1表示已删除，0表示未删除。
(1)页面调整
//修改删除按钮绑定事件：
函数doDelete(){
//获取数据表中所有选中的行并返回一个数组对象
var rows=$(#grid )。datagrid(“get selections”)；
if(rows.length==0){
//如果没有选择记录，会弹出提示。
$.messager.alert(提示信息，请选择要删除的调度员！，‘警告’)；
}否则{
//选择调度员，会弹出一个确认框。
$.messager.confirm(删除确认，您确定要删除选定的调度程序吗？，函数(r){
如果(r){
var array=新数组()；
//好，发送请求。
//获取所有选定调度程序的id
for(var I=0；irows.lengthi ){
var staff=rows[I]；//json对象
var id=staff.id
array . push(id)；
}
var ids=array.join(，)；//1,2,3,4,5
location . href= staff ization _ delete batch . action？ids= ids
}
});
}
}
(2)服务器实现的第一步：在StaffAction中创建一个deleteBatch批处理方法。
//属性驱动，接收页面提交的ids参数
私有字符串id；
/**
*派人员批量删除。
*/
公共字符串deleteBatch(){
staff service . delete batch(ids)；
退货单；
}
第二步：在服务中提供批量删除方法。
/**
*派人员批量删除。
*逻辑删除，将deltag改为1。
*/
public void delete batch(String id){//1，2，3，4
if(string utils . isnotblank(ids)){
String[] staffIds=ids.split(，)；
for(字符串id : staffIds) {
staff Dao . execute update( staff . delete ，id)；
}
}
}
步骤3:在Staff.hbm.xml中提供HQL语句，用于逻辑删除dispatcher。
！-调度程序的逻辑删除-
查询名称=staff.delete
更新人员集deltag=1 其中id=？
/查询
调度员修改功能
(1)页面调整步骤1:为数据表绑定双击事件。
步骤2:在复制页面中添加调度程序窗口，以获得修改后的调度程序窗口。
步骤3:定义函数
//数据表绑定双击行事件对应的函数
函数dodblickrow(rowIndex，rowData){
//打开“修改调度程序”窗口。
$(#editStaffWindow )。窗口(“打开”)；
//使用form对象的load方法回显数据。
$(#editStaffForm )。form(load ，row data)；
}
(2)服务器在调度中实现编辑方法的创建，修改调度信息。
/**
*修改调度员的信息。
*/
公共字符串编辑(){
//显式查询数据库，根据id查询原始数据
staff staff=staff service . find byid(model . getid())；
//用页面提交的数据覆盖
staff . setname(model . getname())；
staff . settelephone(model . gettelephone())；
staff . sethaspda(model . get haspda())；
staff . set standard(model . get standard())；
staff . set station(model . get station())；
staff service . update(staff)；
退货单；
}
关于详细解释datagrid用法的文章到此结束(重要)。有关datagrid用法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
