jfinal框架mis系统前台代码

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/joshua112/article/details/80108465

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

1.输入框

<input type="text" class="form-control " id="keyWord" name="keyWord" style="display: inline;width: 350px;" placeholder="根据用户OA号、用户姓名进行模糊查询">

2.下拉列表框

    <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>

3.按钮

<button type="button" class="btn btn-primary" onClick="search()"><i class="icon-edit"></i> 查询</button>

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%;">

//默认今天日期

function today(){
    var today=new Date();
    var h=today.getFullYear();
    var m=today.getMonth()+1;
    var d=today.getDate();
    m= m<10?"0"+m:m;   //  这里判断月份是否<10,如果是在月份前面加'0'
    d= d<10?"0"+d:d;        //  这里判断日期是否<10,如果是在日期前面加'0'
    return h+"-"+m+"-"+d;
}
//上月的今天日期
function lastMonthDay(){ 
        var now=new Date();  
        var year = now.getFullYear();//getYear()+1900=getFullYear()  
        var month = now.getMonth() +1;//0-11表示1-12月  
        var day = now.getDate();  
        if(parseInt(month)<10){  
            month="0"+month;  
        }  
        if(parseInt(day)<10){  
            day="0"+day;  
        }  
 
        now =year + '-'+ month + '-' + day;  
 
        if (parseInt(month) ==1) {//如果是1月份,则取上一年的12月份  
            return (parseInt(year) - 1) + '-12-' + day;  
        }  
 
        var  preSize= new Date(year, parseInt(month)-1, 0).getDate();//上月总天数  
        if (preSize < parseInt(day)) {//上月总天数<本月日期,比如3月的30日,在2月中没有30  
            return year + '-' + month + '-01';  
        }  
 
        if(parseInt(month) <=10){  
            return year + '-0' + (parseInt(month)-1) + '-' + day;  
        }else{  
            return year + '-' + (parseInt(month)-1) + '-' + day;  
        }  
 
}  
document.getElementById("end").value = today();

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+"&nbsp;"+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);
});





展开阅读全文

没有更多推荐了,返回首页