• 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.   
    6. //加载表格datagrid  
    7. function loadGrid()  
    8. {  
    9.     //加载数据  
    10.     $('#cxdm').datagrid({  
    11.                  'auto',  
    12.                 height:300,               
    13.                 striped: true,  
    14.                 singleSelect : true,  
    15.                 url:'getPsNewConsultList.action',  
    16.                 //queryParams:{},  
    17.                 loadMsg:'数据加载中请稍后……',  
    18.                 pagination: true,  
    19.                 rownumbers: true,     
    20.                 columns:[[  
    21.                     {field:'adviceid',title: '来文号',align: 'center', getWidth(0.2)},  
    22.                     {field:'consulter',title: '案由',align: 'center', getWidth(0.45),  
    23.                         //添加超级链,并将来文号作为参数传入  
    24.                         formatter:function(val,rec){  
    25.                             //alert(rec.adviceid);  
    26.                             return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";  
    27.                        }  
    28.                     },  
    29.                     {field:'content',title: '状态',align: 'center', getWidth(0.2)},  
    30.                     {field:'replynumber',title: '回复数',align: 'center', getWidth(0.05)}                                                          
    31.                 ]]  
    32.             });  
    33. }  
    34.   
    35. //为loadGrid()添加参数  
    36.         var queryParams = $('#cxdm').datagrid('options').queryParams;  
    37.         queryParams.who = who.value;  
    38.         queryParams.type = type.value;  
    39.         queryParams.searchtype = searchtype.value;  
    40.         queryParams.keyword = keyword.value;  
    41.         //重新加载datagrid的数据  
    42.         $("#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.   
    8. @SuppressWarnings("unchecked")  
    9. public String getPsNewConsultList() throws GlobalException {  
    10.         //获取每页显示的行数  
    11.         int pageRows=10;  
    12.         if(null!=request.getParameter("rows")) {  
    13.             pageRows=Integer.parseInt(request.getParameter("rows").toString());  
    14.         }  
    15.         ...........  
    16.         //获取结果集  
    17.         this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));  
    18.         //获取总记录数  
    19.         this.setTotal(100);  
    20.         ...............  
    21. }  

    其中的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;  
  • 相关阅读:
    (一)Ionic 项目搭建(参考)
    MySQL安装及常用命令
    (五)vue.js 集成scss(参考)
    (四)vue.js 外部配置文件(参考)
    (三)vue.js api统一管理(参考)
    好玩的折纸效果
    PropTypes没有定义的问题
    border边框设置为1px
    写了一个好玩的弹性列表效果
    H5中的requestAnimationFrame
  • 原文地址:https://www.cnblogs.com/wdcwy/p/5096905.html
Copyright © 2020-2023  润新知