datagrid easyui列表数据

前面有一篇已经介绍了使用JDBC从数据库中取数据，最后以图表的形式展现出来，那么，如果需要以列表的形式展示出来呢

与图表的类似，唯一不同的在于前端的处理，js的相关配置

1、html页面：

<div>
        <table id="testId" class="easyui-datagrid">
        </table>
    </div>

2、js里前端的处理

function testTable() {
	 
        $("#testId").datagrid({  //存放表格的地方
            striped: true,   //true 就把行条纹化。（即奇偶行使用不同背景色）
            singleSelect: true,  //True 就会只允许选中一行。
            url: '方法名', 
            queryParams: {//参数name的传递
            	name:$("#name").val()
            },
            loadMsg: '数据加载中请稍后……', //当从远程站点加载数据时，显示的提示信息。
            pagination: true,  //True 就会在 datagrid 的底部显示分页栏。
            pageSize: 10, //当设置了 pagination 特性时，初始化页码尺寸。
            pageList: [15], //当设置了 pagination 特性时，初始化页面尺寸的选择列表
            pageNumber: 1, //当设置了 pagination 特性时，初始化页码。
            rownumbers: true, //True 就会显示行号的列。
            idField: 'id', //标识字段。
            pagePosition: "bottom", //
            //自适应页面高度 开始
            fitColumns: true,
            fit: true,
            //自适应页面高度 结束
            autoRowHeight: false,
            columns: [[
				     //{field:'列的字段名',title: '列的标题文字。',align: '对齐方式',width : 列宽 }, 
					 {field:'name',title: '姓名',align: 'center',width : 120},  
					 //......
            ]],
            onLoadSuccess: function (data) { //当数据加载成功时触发。
					//执行相关的function
            }
        }).datagrid("getPager").pagination({
            showPageList: false
        });
    }

3、controller层：

@Controller
	public class TestController {

		private Logger logger = LoggerFactory.getLogger(TestController.class);

		@Autowired
		private TetsService testService;
		
		@RequestMapping(value = "方法名")
		@ResponseBody
		public String getTestTable(HttpServletRequest request, PageEntity pageEntity) {

			String name = request.getParameter("name");
		
			DataGrid dataGrid = new DataGrid();
			dataGrid = testService.findAllTable(name,pageEntity);//可以翻页的表格
			String result = JSON.toJSONString(dataGrid);
			return result;

		}
	}

中间省略service和model实体类，详情参照对于图表的获取

4、serviceImplement层：

 @Override
    public DataGrid findAllTable(String name,PageEntity pageEntity) {

		//获取的数据总行数
        String sqlcont = "有效的sql语句";
        //数据源sql
        String sql_list ="有效的sql语句";

        if (name.length() > 0) {
            sqlcont += "  AND NAME like '%" + name + "%'   ";
            sql_list += "  AND NAME like '%" + name + "%'   ";
        }
       
        DataGrid dataGrid = new DataGrid();
		//Test为实体类
        RowMapper<Test> mapper = new RowMapper<Test>() {

            @Override
            public Test mapRow(ResultSet rs, int rowNum) throws SQLException {

                Test testList = new Test();
                testList.setName(rs.getString("NAME"));//获取NAME数据
               //.......
                return testList;
            }

        };
        //总记录数
        int recordCount = jdbcTemplate.queryForObject(sqlcont, Integer.class);
        //构建分页
        sql_list = PageUtil.getPageListSQL(sql_list, pageEntity.getPage(), pageEntity.getRows(), recordCount);

        List<Test> testListInfos = jdbcTemplate.query(sql_list, mapper);
        dataGrid.setRows(testListInfos);
        dataGrid.setTotal(recordCount);

        return dataGrid;

    }

对于JDBC获取的sql字段名，可以直接传递到js中，比如select count(1) as total from testTable;

其中的total，可以直接映射到RowMapper中

RowMapper

RowMapper

RowMapper