前言

之前我做了个选项卡组件，这会儿我想往里面增加点东西，就决定是你了数据表格！

实现

先看看效果图：

步骤：
导入依赖：

        <!-- 写全局样式 --><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   <!-- 定义图标的样式 --><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   <!--组件库源文件的js文件  --><script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/roleInfo.js"></script>   

然后我们需要一个数据表格的jsp代码组件：

<table id="dg"></table>

以及js代码定义属性：

$(function(){$('#dg').datagrid({    url:$('#ctx').val()+'/book.action?methodName=datagrid', //数据来源路径pagination:true,//是否分页columns:[[    //列属性 字段名 标题名 宽度{field:'id',title:'id',width:100},    {field:'name',title:'书籍名称',width:100},    {field:'pinyin',title:'拼音',width:100,align:'right'}    ]]    });  
})

看到上方的数据来源，嘿嘿嘿，就要进入到后台代码啦，因为我是用的数据库中的数据来动态实行数据表格的！

这是我用的表：

我主要用了其中三个列来做，按照我使用的自定义mvc框架，从路径进入到action当中来实现业务逻辑：

看看action：

package com.zengjing.action;import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zengjing.dao.BookDao;
import com.zengjing.entity.Book;
import com.zengjing.framework.ActionSupport;
import com.zengjing.framework.ModelDriven;
import com.zengjing.util.DataGridResult;
import com.zengjing.util.PageBean;
import com.zengjing.util.ResponseUtil;public class BookAction extends ActionSupport implements ModelDriven<Book>{private Book book=new Book();private BookDao bookDao=new BookDao();@Overridepublic Book getModel() {// TODO Auto-generated method stubreturn book;}public String datagrid(HttpServletRequest req,HttpServletResponse resp) throws Exception {PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Book> list = this.bookDao.list(book, pageBean);/*Map<String, Object> map=new HashMap<String, Object>();map.put("total", pageBean.getTotal());map.put("rows", list);*/ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));return null;}}

看到上面的datagrid方法当中，我先是查询出来了book的集合，由于我们需要导入的数据格式也是json格式，以及我们还需要做分页效果，我们使用一个map来将它们装起来。

导入的数据格式（只看格式，数据不是我导入的！）：

{"total":28,"rows":[{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

所以我一开始是使用的map集合来将他们装到一起，后面为了代码不冗余，使三行代码化作一行实现，我利用了一个工具类DataGridResult，将list和rows放在一起传递过去。，最后调用方法writeJson将数据输出为json格式的数据传递过去。

最后就实现了动态将数据导入数据表格中的效果！

哦对，模糊查询我们只需要在js代码中加上：

//点击搜索按钮，按名字进行书籍查询$("#btn-search").click(function(){//alert(11);$('#dg').datagrid('reload', {name:$("#name").val()	//前面的name是字段名 后面的name是jsp输入框的值}); });

jsp界面加上：

<div id="tb"><input class="easyui-textbox" id="name" name="name" /><a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a><a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a></div>

就可以达到我上面放的效果图的样子啦~

总结

今天的博客分析到此为止，摆摆我们下次再见！