jfinal框架mis系统前台代码

最新推荐文章于 2020-10-10 17:10:34 发布

mujunjun

最新推荐文章于 2020-10-10 17:10:34 发布

阅读量398

点赞数

分类专栏：前台文章标签： jfinal bootstrap datatables

本文链接：https://blog.csdn.net/joshua112/article/details/80108465

版权

前台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面样式bootstrap3,日期控件，My97DatePicker，表格控件datatables

1.输入框

2.下拉列表框

</select>

3.按钮

4.日期选择框

开始日期:<input id="start" type="text" name="start" id="start" class="form-control Wdate required" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" style="display: inline;width: 10%;">

结束日期:<input id="end" type="text" name="end" id="end" class="form-control Wdate required" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" style="display: inline;width: 10%;">

//默认今天日期

document.getElementById("start").value = lastMonthDay();

5.数据表格

<div class="text-left" >
   <form id="seach_fm">
       <input type="text" class="form-control " id="keyWord" name="keyWord" style="display: inline;width: 350px;" placeholder="根据用户OA号、用户姓名进行模糊查询">
       <select id="accountStatus" name="accountStatus" class="form-control" style="display: inline;width: 150px;">
           <option value="-1" selected="selected"> 选择状态</option>
           <option value="0"> 初始化</option>
           <option value="1"> 已认证/未审核</option>
           <option value="2"> 已审核</option>
           <option value="3"> 禁用</option>
       </select>
       <button type="button" class="btn btn-default" onClick="search()"><i class="icon-search"></i> 查询</button>
       <span class="text-warning" style="padding-left: 10px;">注：鼠标移到用户姓名列中，可显示该用户的创建时间与更新时间。</span>
   </form>
</div>
<table class="bordered" id="obj">
   <thead>
       <tr>
           <th style="width: 60px;text-align: center;">OA号</th>
           <th style="width: 80px;text-align: center;">姓名</th>
           <th style="width: 150px;text-align: center;">身份证号</th>
           <th style="width: 100px;text-align: center;">联系电话</th>
           <th style="text-align: center;">单位</th>
           <th style="width: 100px;text-align: center;">状态</th>
           <th style="width: 100px;text-align: center;">操作</th>
       </tr>
   </thead>
</table>

</div>

//js在页面加载时初始化表格

obj=$('#obj').DataTable({
       searching : false,//默认查询功能
       ordering : false,
       processing : true,
       serverSide : true,
       bLengthChange:false,
       ajax : {
           url : '${ctx}/accountAudit/searchList',
           type : "post"
       },
       columns: [
                   {"data" : "accountNum","sClass" : "text-center","width":"10%"},
                   {"data" : "userName","sClass" : "text-center"},
                   {"data" : "paperworkNumber","sClass" : "text-center","sDefaultContent":""},
                   {"data" : "mobile","sClass" : "text-center","sDefaultContent":""},
                   {"data" : "unitList"},
                   {"data" : "accountStatus","sClass" : "text-center"},
                   {"data" : null,"sClass" : "text-center"}
       ],
       columnDefs: [
                       {
                           targets : 1,
                           render : function(data, type, row) {
                               var str="<span title='创建时间："+row.createDate+",更新时间："+row.updateDate+"'>"+data+"</span>";
                               return str;
                           }
                       },
                       {
                               targets : 4,
                               render : function(data, type, row) {
                                   var depName="" ;
                                   $.each(data,function(i,val) {
                                       if(depName==""){
                                           depName = val.shortName
                                       }else{
                                           depName += "<br>"+ val.shortName
                                       }
                                   });
                                   return depName;
                               }
                           },
                      {
                          targets : 5,
                          render : function(data, type, row) {
                              var status ;
                              if(row.accountStatus==0){
                                  status = "<span style='text-align:left'>初始化</span>";
                              }else if(row.accountStatus==1){
                                  status = "已认证/未审核";
                              }else if(row.accountStatus==2){
                                  status = "已审核";
                              }else if(row.accountStatus==3){
                                  status = "禁用";
                              }
                              return status;
                          }
                      },
                      {
                          targets : 6,
                          render : function(data, type, row) {
                              var qy = "";
                              var del ="";
                              if(row.accountStatus==3){
                                  qy = '<a href="javascript:enable('+row.accountId+')">启用</a>'
                              }else if(row.accountStatus==2){
                                  qy = '<a href="javascript:disable('+row.accountId+')">禁用</a>'
                              }
                              if(row.isDeleted==0){
                                  del = '<a href="javascript:del('+row.accountId+')">删除</a>';
                              }else{
                                  del ='<a href="javascript:recovery('+row.accountId+')">恢复</a>' ;

                              }
                              return qy+" "+del;
                          }
                      }
                  ]

});

6.绑定回车事件哈

//函数必须放到页面加载函数

document.onkeydown = function(e){
    var ev = document.all ? window.event : e;
    if(ev.keyCode==13) {
       seach();//回车执行的方法
     }

}

7.弹出页面

    layer.open({
            type: 2,
            title: '【详情页面】短信记录',
            shadeClose: true,
            shade: false,
            area: ['70%', '90%'],
            content: '/test'

});

layer.msg("请选择要审核的单位",{icon:0});//几秒后自动关闭

layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
//do something index=1确认

layer.close(index);
});