202206-15|EasyUI-DataGrid控件[表格+日历]应用

举报
写程序的小王叔叔 发表于 2022/06/16 09:49:44 2022/06/16
【摘要】 主页：小王叔叔的博客支持:点赞👍关注✔️收藏💖表格应用​ ​<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="b5d6e6" id="aimtab" class="easyui-datagrid" toolbar="#tb" sortable="tr...

主页：小王叔叔的博客

支持:点赞👍关注✔️收藏💖

表格应用

​

 ​




<table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="b5d6e6" 
                    id="aimtab" class="easyui-datagrid"   toolbar="#tb" sortable="true" sortOrder="asc"  resizable="true"
                    striped="true" pagination="true" singleSelect="true" getSelected="khxm_id"
                    data-options="url:'../CD17B/CD17BF01!query.action'" loadMsg="数据加载中,请稍后...",
                    rownumbers="true" fitColumns="true" singleSelect="true">
                      <thead>
                            <tr>
                                <th field="khxm_id" ></th>    <!--表格隐藏项-->
                                <th field="khmx_id"></th>    <!--表格隐藏项-->
                                <th field="yg_id" ></th>    <!--表格隐藏项-->
                                <th field="bm_id" ></th>    <!--表格隐藏项-->
                                <th field="bm_name" width="20%">考核部门</th>    
                                <th field="kh_zdf" width="20%">总得分</th>                                   
                                <th field="yg_name" width="20%">考核对象</th>   
                                <th field="khxm_date" width="20%">考核时间</th>    
                                <th field="kh_zt" width="18%">考核状态</th>    

                            </tr>                     
                      </thead>


                    </table>
                    <div id="tb" align="right">                            
        <a  class="easyui-linkbutton" id="editBtn" iconCls="icon-edit" onClick="editItems();">评分</a>
        <a class="easyui-linkbutton" id="seachBtn" iconCls="icon-search" onClick="searchItems()">查看</a> 
                    </div>


function editItems(){
                 var row = $("#aimtab").datagrid("getSelected");
                 var  v_url="../CD17B/CD17BF01!edit.action?khxm_id="+row.khxm_id+"&operaType="+'edit'+"&query="+'1';
                
                    if (row){
                        alert('khxm_id:'+row.khxm_id+"\nkhmx_id:"+row.khmx_id+"\nyg_id:"+row.yg_id);                           
                    $.ajax({
                        type:'GET',                
                        url: v_url,    
                        data:"",                        
                        dataType:'json',
                        success:function (data){
                            $("#aimtab").load(data);
                        }                        
                    });
         $("#aimtab").dialog();        
                }                
            }


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

 
Html代码
<!-- 加载jquery -->  
 <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>  
<!-- 加载jquery-easyui -->  
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">  
<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>  
<!-- 加载jquery -->
    <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
    <!-- 加载jquery-easyui -->
    <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
    <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>


Html代码
     <table id="cxdm"></table>  
     <table id="cxdm"></table>
 
加载datagrid的js代码

Java代码
//页面加载  
$(document).ready(function(){  
            loadGrid();  
});  
  

//加载表格datagrid  
function loadGrid()  
{  
    //加载数据  
    $('#cxdm').datagrid({  
                width: 'auto',  
                height:300,               
                striped: true,  
                singleSelect : true,  
                url:'getPsNewConsultList.action',  
                //queryParams:{},  
                loadMsg:'数据加载中请稍后……',  
                pagination: true,  
                rownumbers: true,     
                columns:[[  
                    {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},  
                    {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),  
                        //添加超级链，并将来文号作为参数传入  
                        formatter:function(val,rec){  
                            //alert(rec.adviceid);  
                            return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";  
                       }  
                    },  
                    {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},  
                    {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}                                                          
                ]]  
            });  
}  
  
//为loadGrid()添加参数  
        var queryParams = $('#cxdm').datagrid('options').queryParams;  
        queryParams.who = who.value;  
        queryParams.type = type.value;  
        queryParams.searchtype = searchtype.value;  
        queryParams.keyword = keyword.value;  
        //重新加载datagrid的数据  
        $("#cxdm").datagrid('reload');  
//页面加载
$(document).ready(function(){
      loadGrid();
});
 
//加载表格datagrid
function loadGrid()
{
  //加载数据
  $('#cxdm').datagrid({
        width: 'auto',
        height:300,       
        striped: true,
        singleSelect : true,
        url:'getPsNewConsultList.action',
        //queryParams:{},
        loadMsg:'数据加载中请稍后……',
        pagination: true,
        rownumbers: true, 
        columns:[[
            {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
          {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
            //添加超级链，并将来文号作为参数传入
            formatter:function(val,rec){
              //alert(rec.adviceid);
                      return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
                   }
          },
          {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
          {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}                           
        ]]
      });
}
 
//为loadGrid()添加参数
    var queryParams = $('#cxdm').datagrid('options').queryParams;
      queryParams.who = who.value;
      queryParams.type = type.value;
      queryParams.searchtype = searchtype.value;
      queryParams.keyword = keyword.value;
      //重新加载datagrid的数据
      $("#cxdm").datagrid('reload');
 
 datagrid添加参数的方式
Js代码
//为loadGrid()添加参数  
var queryParams = $('#cxdm').datagrid('options').queryParams;  
        queryParams.who = who.value;  
        queryParams.type = type.value;  
        queryParams.searchtype = searchtype.value;  
        queryParams.keyword = keyword.value;  
        //重新加载datagrid的数据  
        $("#cxdm").datagrid('reload');  
//为loadGrid()添加参数
var queryParams = $('#cxdm').datagrid('options').queryParams;
      queryParams.who = who.value;
      queryParams.type = type.value;
      queryParams.searchtype = searchtype.value;
      queryParams.keyword = keyword.value;
      //重新加载datagrid的数据
      $("#cxdm").datagrid('reload');
 或者直接添加在url中
Js代码
$('#repeatpspolal').datagrid({  
     title:'重复的未初分提案',  
     loadMsg:"数据加载中，请稍后……",  
     region:'north',  
     url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,  
。。。。。。  
 $('#repeatpspolal').datagrid({
      title:'重复的未初分提案',
      loadMsg:"数据加载中，请稍后……",
      region:'north',
      url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,


Action层   Java代码

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


 
其中的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
 

Java代码
<action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">  
        <result name="success" type="json">  
             <param name="includeProperties">  
                    ^rows\[\d+\]\.\w+,total  
             </param>  
             <param name="noCache">true</param>    
            <param name="ignoreHierarchy">false</param>   
              </result>  
    </action>  
<action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
    <result name="success" type="json">
            <param name="includeProperties">
                ^rows\[\d+\]\.\w+,total
           </param>
           <param name="noCache">true</param> 
          <param name="ignoreHierarchy">false</param>
              </result>
  </action>


 
service层
 

Java代码
@SuppressWarnings("unchecked")  
    public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {  
        return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);  
    }  
@SuppressWarnings("unchecked")
  public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
    return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
  }


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

Java代码
List<Person> list=new ArrayList<Person>();  
Person person=null;  
while(rs.next())  
{  
    person=new Person();  
    person.setId(i);  
    person.setName("名字"+i);  
    list.add(person);  
}  
.........  
return list;   
List<Person> list=new ArrayList<Person>();
Person person=null;
while(rs.next())
{
  person=new Person();
  person.setId(i);
  person.setName("名字"+i);
  list.add(person);
}
.........
return list;



结果图：

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNjUzNDA1,size_16,color_FFFFFF,t_70

20210321183202182.jpeg


日历应用

jsp：

<head>
<!--在头部标签引入jqueryUI标签文件-->    
<!--jquery EasyUI 引入的插件-->        
<!-- start-->
        <script type="text/javascript" src="../js/erpTwoJS/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="../js/erpTwoJS/easyui/jquery.easyui.min.js"></script>  
        <link rel="stylesheet" type="text/css" href="../js/erpTwoJS/easyui/themes/default/easyui.css"/> 
        <link rel="stylesheet" type="text/css" href="../js/erpTwoJS/easyui/themes/icon.css"/>       
        <script type="text/javascript" src="../js/erpTwoJS/easyui/locale/easyui-lang-zh_CN.js"></script>  
        <!--自己引用样式的js文件-->
        <script type="text/javascript" src="../js/erpTwoJS/index.js"></script>  
<!--end-->    
</head>
<body>
<p>在HTML体中进行添加自己设计的布局样式</p>
/*
设置界面显示日历样式
*/  

<td width="40%" align="left">考核月份：                        
        <input name="khxm_date" class="easyui-datebox" data-options="sharedCalendar:'#khMonth',closeText:'关闭'">
           <div id="khMonth" class="easyui-calendar" ></div>
  </td>

  
/*
设置界面显示样式效果布局
*/  
<table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="b5d6e6" 
                    id="aimtab" class="easyui-datagrid"   toolbar="#tb"
                    url="../CD17B/CD17BF01!query.action"  
                    rownumbers="true" fitColumns="true" singleSelect="true">
                      <thead>
                            <tr>                                              
                                <th field="bm_name" width="20%">考核部门</th>
                                <th field="kh_zdf" width="20%">总得分</th>
                                <th field="yg_name" width="20%">考核对象</th>
                                <th field="khxm_date" width="20%">考核月份</th>
                                <th field="kh_zt" width="18%">考核状态</th>                                
                            </tr>                     
                      </thead>
</table>

 /*
设置界面显示工具栏
*/
<div id="tb">                            
        <a class="easyui-linkbutton" iconCls="icon-edit" onClick="editItems('<s:property value="khxm_id"/>')"><font color="#0CF">评分</font></a>
        <a class="easyui-linkbutton" iconCls="icon-search" onClick="searchItems('<s:property value="yg_id"/>');"><font color="#0CF">查看</font></a> 
</div>

/*
设置界面显示翻页功能
*/
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10"style="background:#efefef;border:1px solid #ccc;">
</div>


</body>

​

​

​

​

⚠️注意 ~

💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！

如有疑问❓可以在评论区💬或私信💬，尽我最大能力🏃‍♀️帮大家解决👨‍🏫！

如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ElementUI jQuery Spring Boot 数据库
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入