easyui datagrid使用(好)

时间：2023-03-08 23:19:22
easyui datagrid使用(好)

加载相关js和css，因为easyui依赖jquery，所有加载easyui前要先加载jquery，否则为提示找不到datagrid

  1. <!-- 加载jquery -->
  2. <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
  3. <!-- 加载jquery-easyui -->
  4. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
  5. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
  6. <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>

界面加入

  1. <table id="cxdm"></table>

加载datagrid的js代码

  1. //页面加载
  2. $(document).ready(function(){
  3. loadGrid();
  4. });
  5. //加载表格datagrid
  6. function loadGrid()
  7. {
  8. //加载数据
  9. $('#cxdm').datagrid({
  10. width: 'auto',
  11. height:300,
  12. striped: true,
  13. singleSelect : true,
  14. url:'getPsNewConsultList.action',
  15. //queryParams:{},
  16. loadMsg:'数据加载中请稍后……',
  17. pagination: true,
  18. rownumbers: true,
  19. columns:[[
  20. {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
  21. {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
  22. //添加超级链，并将来文号作为参数传入
  23. formatter:function(val,rec){
  24. //alert(rec.adviceid);
  25. return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
  26. }
  27. },
  28. {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
  29. {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}
  30. ]]
  31. });
  32. }
  33. //为loadGrid()添加参数
  34. var queryParams = $('#cxdm').datagrid('options').queryParams;
  35. queryParams.who = who.value;
  36. queryParams.type = type.value;
  37. queryParams.searchtype = searchtype.value;
  38. queryParams.keyword = keyword.value;
  39. //重新加载datagrid的数据
  40. $("#cxdm").datagrid('reload');

datagrid添加参数的方式

  1. //为loadGrid()添加参数
  2. var queryParams = $('#cxdm').datagrid('options').queryParams;
  3. queryParams.who = who.value;
  4. queryParams.type = type.value;
  5. queryParams.searchtype = searchtype.value;
  6. queryParams.keyword = keyword.value;
  7. //重新加载datagrid的数据
  8. $("#cxdm").datagrid('reload');

或者直接添加在url中

  1. $('#repeatpspolal').datagrid({
  2. title:'重复的未初分提案',
  3. loadMsg:"数据加载中，请稍后……",
  4. region:'north',
  5. url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
  6. 。。。。。。

Action层

  1. //当前页码
  2. private int page;
  3. .........
  4. //征询意见结果集
  5. private List<Object> rows;
  6. ...........
  7. @SuppressWarnings("unchecked")
  8. public String getPsNewConsultList() throws GlobalException {
  9. //获取每页显示的行数
  10. int pageRows=10;
  11. if(null!=request.getParameter("rows")) {
  12. pageRows=Integer.parseInt(request.getParameter("rows").toString());
  13. }
  14. ...........
  15. //获取结果集
  16. this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));
  17. //获取总记录数
  18. this.setTotal(100);
  19. ...............
  20. }

其中的page由datagrid传入，当用户在datagrid左下角选择每页显示的行数时，datagrid会将该值已参数形式附加到url后面传入action中，名字就叫page，还要将结果总行数total传给datagrid，用于分页

不知道是datagrid配置有误还是datagrid的bug，datagrid的结果集和每页显示的行数都叫rows，重名了

解决办法如上，结果集还是叫rows，但是List的类型改为Object而不能用实体的类型，每页显示的行数通过request获取

action配置时，要继承json-default，json-default继承自struts-default，还要配置输出结果类型为json

  1. <action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
  2. <result name="success" type="json">
  3. <param name="includeProperties">
  4. ^rows\[\d+\]\.\w+,total
  5. </param>
  6. <param name="noCache">true</param>
  7. <param name="ignoreHierarchy">false</param>
  8. </result>
  9. </action>

service层

  1. @SuppressWarnings("unchecked")
  2. public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
  3. return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
  4. }

dao层只需要将ResultSet中的数据循环加入实体属性，然后将实体实例加入List即可，形式如下：

    1. List<Person> list=new ArrayList<Person>();
    2. Person person=null;
    3. while(rs.next())
    4. {
    5. person=new Person();
    6. person.setId(i);
    7. person.setName("名字"+i);
    8. list.add(person);
    9. }
    10. .........
    11. return list;

相关文章