运维开发网

详细介绍如何使用datagrid

运维开发网 https://www.qedev.com 2022-05-04 16:20 出处:网络
这篇文章主要介绍了datagrid使用方法(重要),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

这篇文章主要介绍了datagrid使用方法(重要),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.将静态HTML呈现为数据网格样式

lt;!-- 方式一:将静态HTML渲染为datagrid样式 --gt;lt;table class="easyui-datagrid"gt;lt;theadgt;lt;trgt;lt;th data-options="field:'id'"gt;编号lt;/thgt;lt;th data-options="field:'name'"gt;姓名lt;/thgt;lt;th data-options="field:'age'"gt;年龄lt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;001lt;/tdgt;lt;tdgt;小明lt;/tdgt;lt;tdgt;90lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt;002lt;/tdgt;lt;tdgt;老王lt;/tdgt;lt;tdgt;3lt;/tdgt;lt;/trgt;lt;/tbodygt;lt;/tablegt;

2.发送ajax请求以获取json数据并创建datagrid提供的json文件。


lt;!-- 方式二:发送ajax请求获取json数据创建datagrid --gt;lt;table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" class="easyui-datagrid"gt;lt;theadgt;lt;trgt;lt;th data-options="field:'id'"gt;编号lt;/thgt;lt;th data-options="field:'name'"gt;姓名lt;/thgt;lt;th data-options="field:'age'"gt;年龄lt;/thgt;lt;/trgt;lt;/theadgt;lt;/tablegt;


2.使用easyUI提供的API创建数据网格(主)

lt;!-- 方式三:使用easyUI提供的API创建datagrid --gt;lt;script type="text/javascript"gt;$(function(){//页面加载完成后,创建数据表格datagrid$("#mytable").datagrid({//定义标题行所有的列columns:[[ {title:'编号',field:'id',checkbox:true}, {title:'姓名',field:'name'}, {title:'年龄',field:'age'}, {title:'地址',field:'address'} ]],//指定数据表格发送ajax请求的地址url:'${pageContext.request.contextPath }/json/datagrid_data.json',rownumbers:true,singleSelect:true,//定义工具栏toolbar:[ {text:'添加',iconCls:'icon-add', //为按钮绑定单击事件 handler:function(){ alert('add...'); } }, {text:'删除',iconCls:'icon-remove'}, {text:'修改',iconCls:'icon-edit'}, {text:'查询',iconCls:'icon-search'} ],//显示分页条pagination:true});});lt;/scriptgt;

如果在数据表中使用分页栏,那么要求服务器响应的json就变成了:


请求


回应:


3.案例:调度员逐页查询。

(1)页面调整

修改页面中数据网格的URL地址



(2)服务器端实现


分页相关属性



/** * 通用分页查询方法 */public void pageQuery(PageBean pageBean) {int currentPage = pageBean.getCurrentPage();int pageSize = pageBean.getPageSize();DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();//查询total---总数据量detachedCriteria.setProjection(Projections.rowCount());//指定hibernate框架发出sql的形式----》select count(*) from bc_staff;Listlt;Longgt; countList = (Listlt;Longgt;) this.getHibernateTemplate().findByCriteria(detachedCriteria);Long count = countList.get(0);pageBean.setTotal(count.intValue());//查询rows---当前页需要展示的数据集合

(3)detached criteria . set projection(空);//指定hibernate框架发布的sql的形式——“select * from BC _ staff”

int firstResult = (currentPage - 1) * pageSize;int maxResults = pageSize;List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults);pageBean.setRows(rows);}


//属性驱动,接收页面提交的分页参数private int page;private int rows;/** * 分页查询方法 * @throws IOException */public String pageQuery() throws IOException{PageBean pageBean = new PageBean();pageBean.setCurrentPage(page);pageBean.setPageSize(rows);//创建离线提交查询对象DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);pageBean.setDetachedCriteria(detachedCriteria);staffService.pageQuery(pageBean);//使用json-lib将PageBean对象转为json,通过输出流写回页面中//JSONObject---将单一对象转为json//JSONArray----将数组或者集合对象转为jsonJsonConfig jsonConfig = new JsonConfig();//指定哪些属性不需要转jsonjsonConfig.setExcludes(new String[]{"currentPage","detachedCriteria","pageSize"});String json = JSONObject.fromObject(pageBean,jsonConfig).toString();ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");ServletActionContext.getResponse().getWriter().print(json);return NONE;}

批量删除派遣人员

dispatcher表中有一个删除标志deltag,1表示已删除,0表示未删除。

(1)页面调整


//修改删除按钮绑定的事件:function doDelete(){//获取数据表格中所有选中的行,返回数组对象var rows = $("#grid").datagrid("getSelections");if(rows.length == 0){//没有选中记录,弹出提示$.messager.alert("提示信息","请选择需要删除的取派员!","warning");}else{//选中了取派员,弹出确认框$.messager.confirm("删除确认","你确定要删除选中的取派员吗?",function(r){if(r){var array = new Array();//确定,发送请求//获取所有选中的取派员的idfor(var i=0;ilt;rows.length;i++){var staff = rows[i];//json对象var id = staff.id;array.push(id);}var ids = array.join(",");//1,2,3,4,5location.href = "staffAction_deleteBatch.action#63;ids="+ids;}});}}

(2)服务器实现的第一步:在StaffAction中创建一个deleteBatch批处理方法。

//属性驱动,接收页面提交的ids参数private String ids;/** * 取派员批量删除 */public String deleteBatch(){staffService.deleteBatch(ids);return LIST;}

第二步:在服务中提供批量删除方法。

/** * 取派员批量删除 * 逻辑删除,将deltag改为1 */public void deleteBatch(String ids) {//1,2,3,4if(StringUtils.isNotBlank(ids)){String[] staffIds = ids.split(",");for (String id : staffIds) {staffDao.executeUpdate("staff.delete", id);}}}

步骤3:在Staff.hbm.xml中提供HQL语句,用于逻辑删除dispatcher。

lt;!-- 取派员逻辑删除 --gt; lt;query name="staff.delete"gt; UPDATE Staff SET deltag = '1' WHERE id = #63; lt;/querygt;

调度员修改功能

(1)页面调整步骤1:为数据表绑定双击事件。


步骤2:在复制页面中添加调度程序窗口,以获得修改后的调度程序窗口。


步骤3:定义函数

//数据表格绑定的双击行事件对应的函数function doDblClickRow(rowIndex, rowData){//打开修改取派员窗口$('#editStaffWindow').window("open");//使用form表单对象的load方法回显数据$("#editStaffForm").form("load",rowData);}

(2)服务器在StaffAction中实现edit方法的创建,并修改dispatcher的信息

/** * 修改取派员信息 */public String edit(){//显查询数据库,根据id查询原始数据Staff staff = staffService.findById(model.getId());//使用页面提交的数据进行覆盖staff.setName(model.getName());staff.setTelephone(model.getTelephone());staff.setHaspda(model.getHaspda());staff.setStandard(model.getStandard());staff.setStation(model.getStation());staffService.update(staff);return LIST;}

关于datagrid用法的详细说明(重要)这篇文章到此为止。有关datagrid用法的更多信息,请搜索源搜索网以前的文章或继续浏览下面的相关文章。希望大家以后能多支持

0

精彩评论

暂无评论...
验证码 换一张
取 消