easyui datagrid控件使用

datagrid控件使用

1.目标
把数据库的数据显示到tabs页面中，并且提供查询和分页
效果图：

**删除修改和新增后面在讲今天讲查询和把数据呈现到表格上面：
首先我们了解datagrid控件
是个数据表格控件：并且自带分页属性
jsp界面写个表格标签和需要工具栏
//表格

//两个按钮

搜索新增

js界面
$(function() {}）//自动运行
datagrid需要写在自运行里面**

$('#dg').datagrid({//数据文件读取文件路径url : $("#ctx").val() + '/book.action?methodName=books',//分页工具栏属性pagination : true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。fitColumns : true,//定义工具栏我这里定义了搜索和新增按钮toolbar : '#tb',//列明columns : [ [ {//field是读取数据文件，属性要相同才能被读取field : 'bid',title : 'id',width : 100}, {field : 'bname',title : '名称',width : 100}, {field : 'price',title : '价格',width : 100}, {field : '操作',title : '操作',width : 100,align : "right",formatter : function(value, row, index) {return "<a href='javascript:void(0);' οnclick='xg()'>修改</a>" +"&nbsp<a href='javascript:void(0);' οnclick='del()'>删除</a> "}}] ]})

后面就是把后台数据传到js来了
得到数据方法

public List<Book> executeQuery(Book book, PageBean pageBean) throws Exception {String bname = book.getBname();String sql = "select * from t_mvc_book where 1=1";//如果传了名字过来就加上模糊查询语句if (StringUtils.isNotBlank(bname)) {sql += " and bname like '%" + bname + "%'";}return super.executeQuery(sql, Book.class, pageBean);
}

将数据转化为datagrid需要的形式并且发送

public String books(HttpServletRequest req, HttpServletResponse resp) throws Exception {//分页属性PageBean pageBean = new PageBean();//将分页传入//在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows//我封装的pageBean刚好是这两个属性pageBean.setRequest(req);//得到数据库的所有数据List<Book> list = bookdao.executeQuery(book, pageBean);//将数据变成需要的格式Map<String, Object> map = new HashMap<String, Object>();map.put("total", pageBean.getTotal());map.put("rows", list);//将数据转为josn并且发送回去ResponseUtil.writem(resp, map);return null;}

搜索功能
给搜索设置点击事件
load将数据发送给后台
和前面dao包方法对应

$("#btn-search").click(function() {$('#dg').datagrid('load', {bname : $("#bname").val()});})

结果：

easyui datagrid控件使用相关推荐

easyui datagrid 控件全选
easyui datagrid 控件全选在datagrid控件中全选功能都是easyUI给做好的,只需要将负责全选的复选框设置下面的这个属性为false属性即可全部选中 singleSelect:f ...
EasyUI datagrid控件的基本使用
首先运行一个它的datagrid示例: 出现下图错误: 这是因为它的示例把json数据放到一个单独.json文件,然后加载,浏览器默认不允许加载本地文件: 下面来看一下此控件的基本使用: 首先做一个基 ...
基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自己主动适应宽带高度...
在默认情况下,EasyUI的DataGrid好像都没有具备自己主动宽度的适应功能,通常是指定像素宽度的.可是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...
http://www.cnblogs.com/wuhuacong/p/4085725.html 在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是 ...
EasyUI中datagrid控件的使用设置多行表头(两行或多行)
EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: 1 $('#divData' ...
使用c#+(datagrid控件)编辑xml文件
作者Blog:http://blog.csdn.net/ouyang76cn/ 使用c#+(datagrid控件)编辑xml文件这个源码是我根据网上一个vb.net编辑xml文件的原理用c#重写的. ...
asp.net中显示DataGrid控件列序号的几种方法
在aps.net中多数据绑定的控件很多,论功能来说,应该属DataGrid最为齐全,但它没有提供现成的显示记录序号的功能,不过我们可以通过它所带的一些参数来间接得到序号,下面来看看怎样得到和显示序号值 ...
使用 ASP+ DataGrid 控件来创建主视图/详细资料视图
Nikhil Kothari Microsoft Corporation 2000年8月简介 Microsoft® Visual Studio.NET 的下一发行版包括 DataGrid Web 控 ...
DataGrid控件读取具体某行某列的值、获取总列数
WPF中的datagrid控件获取总列数的函数是Items.Count来获取. 以下代码是循环获取各行第二列的数据,并存放在一个名为TX的Textbox控件中: for (int i = 0; i & ...

easyui datagrid控件使用

datagrid控件使用

easyui datagrid控件使用相关推荐

最新文章

热门文章