首页 > 代码库 > Flexigrid的使用(整合Struts2)
Flexigrid的使用(整合Struts2)
Flexigrid是一个jQuery表格插件 下载地址:http://download.csdn.net/detail/itmyhome/7613879
使用方法:
一、相关资源文件的引入
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/flexigrid.css">>二、JSP页面显示
<table class="flexigrid" style="display: none"></table> <script type="text/javascript"> $(function() { $(".flexigrid").flexigrid( { url : ‘getUserAction.action‘, dataType : ‘json‘, colModel : [ {display : ‘名称‘,name : ‘username‘,width : 120,sortable : true,align : ‘center‘}, {display : ‘组织名称‘,name : ‘orgname‘,width : 120,sortable : true,align : ‘center‘} , {display : ‘状态‘,name : ‘state‘,width : 100,sortable : true,align : ‘center‘} , {display : ‘登录名‘,name : ‘loginname‘,width : 120,sortable : true,align : ‘center‘}, {display : ‘创建时间‘,name : ‘ctime‘,width : 120,sortable : true,align : ‘center‘}, {display : ‘备注‘,name : ‘note‘,width : 120,sortable : true,align : ‘center‘} ], buttons : [ {name: ‘新增‘, bclass: ‘add‘, onpress : add}, {name: ‘删除‘, bclass: ‘delete‘, onpress : del}, {name: ‘编辑‘, bclass: ‘edit‘, onpress : edit} ], sortorder : "asc", usepager : true, title : ‘人员信息列表‘, useRp : true, rp : 10, //每页默认结果数 pagestat: ‘显示记录从{from}到{to},总数 {total} 条‘, //汉化显示样式 pagetext: ‘当前页‘, outof: ‘总页数‘, showTableToggleBtn : false, resizable : true, width : ‘auto‘, height : 265 }); function add(){ alert("Add"); } function del(){ alert("Delete"); } function edit(){ alert("Edit"); } }) </script>三、Struts配置
<package name="user_json" extends="json-default"> <action name="getUserAction" method="queryAll" class="com.home.web.UserAction"> <result name="success" type="json"></result> </action> </package>四、后台代码实现
import java.io.IOException; import java.sql.Connection; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.home.util.ConnectionManager; public class UserAction { // 结果集 private List<Map<String, Object>> rows = new ArrayList<Map<String, Object>>(); private Integer page = 1; //当前页 private Integer total; //总记录数 private Integer rp; //每页记录数 public String queryAll() throws IOException { Statement sta = null; ResultSet rs = null; try { Connection conn = ConnectionManager.getConnection(); sta = conn.createStatement(); //mysql分页 String sql = "select username,orgname,state,loginname,ctime,note from e_user limit "+(page-1)*rp+","+rp; rs = sta.executeQuery(sql); ResultSetMetaData md = rs.getMetaData(); // 获得结果集结构信息,元数据 int columnCount = md.getColumnCount(); while (rs.next()) { Map<String, Object> rowData = http://www.mamicode.com/new HashMap();>
页面效果:
后台数据查询代码是基于mysql、JDBC。
源码下载:http://download.csdn.net/detail/itmyhome/7613879
转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/37599503
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。