【做一点、学一点】dtree、jquery.validate我写的部分垃圾代码

时间：2014-05-10 00:52:01 收藏：0 阅读：536

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考点管理</title>
<!--#include file="/html/common/includeyf.html"-->
<script type="text/javascript" src="/js/baseinfo/examinee/examinee.js"></script>
</head>
<body>
<script type="text/x-jquery-tmpl" id="specielitem">
<option value="${specielId}">${specielName}</option>
</script>
<div class="tableWrap">

    <!-- 查询部分 -->
    <div class="searchList">
        <form id="selectForm">
        <table class="tableHead">
        <tr class="tableHeader"><td>查询条件</td></tr>
        </table>
        <table class="tableForm">
            <tr>
                <td align="center" width="20%">
                <select id="status" name="status" onchange="getPage(0)">
                    <option value="-1">状态</option>
                    <option value="1">已启用</option>
                    <option value="0">未启用</option>
                </select>
                </td>
                <td align="center" width="20%">
                <select id="subject" name="subject" onchange="getSpeciel(this.options[this.selectedIndex].value)">
                    <option value="KM">科目</option>
                    <option value="YW">语文</option>
                    <option value="SX">数学</option>
                    <option value="YY">英语</option>
                    <option value="WL">物理</option>
                    <option value="HX">化学</option>
                    <option value="SW">生物</option>
                    <option value="ZZ">政治</option>
                    <option value="LS">历史</option>
                    <option value="DL">地理</option>
                </select>
                </td>
                <td align="center" width="20%">
                <select id="specielId" name="specielId" onchange="getPage(0)">
                    <option value="0">专题</option>
                </select>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <!-- 列表信息 -->
    <div class="searchList">
        <table class="tableHead">
        <tr class="tableHeader"><td>列表信息<button onclick="popExa(‘0‘)">添加</button></td></tr>
        </table>
        <table class="tableEdit" id="detailTable">
        <tr id="indextr">
            <th width="10%" style="text-align:center">序号</th>
            <th width="20%" style="text-align:center">考点名称</th>
            <th width="20%" style="text-align:center">专题</th>
            <th width="10%" style="text-align:center">创建时间</th>
            <th width="15%" style="text-align:center">状态</th>
            <th width="15%" style="text-align:center">操作</th>
        </tr>
        </table>
        <script type="text/x-jquery-tmpl" id="detailList">
        <tr id="examcentreId${examcentreId}">
            <td style="text-align:center">${num}</td>
            <td style="text-align:center">${examcentreName}</td>
            <td style="text-align:center">${specielName}</td>
            <td style="text-align:center">${createtime}</td>
            <td style="text-align:center" id="status${examcentreId}">{{if status==0}}未启用{{else}}已启用{{/if}}</td>
            <td style="text-align:center">
                <button onclick="upStatus(‘${status}‘,‘${examcentreId}‘,this)">{{if status==0}}启用{{else}}停用{{/if}}</button>
                <button onclick="popExa(‘${examcentreId}‘,‘${specielId}‘)">修改</button>
                <button onclick="deleteExa(${examcentreId})">删除</button>
            </td>
        </tr>    
        </script>
        
<div class="formWrap hc"  id="formDiv"></div>
<script type="text/x-jquery-tmpl" id="addVoTmpl">
<form class="infoTitle" id="baseform" >
    <article>
        <fieldset class="S_line2">
            <legend class="tit">{{if examcentreId==0}}添加{{else}}修改{{/if}}</legend>
        </fieldset>
          <table class="tableForm" style="table-layout:fixed">
        <input type="hidden" id="examcentreId" name="examcentreId" value="${examcentreId}">
          {{if examcentreId==0}}
            <tr>
                <td width="40%">科目</td>
                <td width="60%">
                    <select id="subject2" name="subject" onchange="getSpeciel2(this.options[this.selectedIndex].value)">
                    <option value="KM">科目</option>
                    <option value="YW">语文</option>
                    <option value="SX">数学</option>
                    <option value="YY">英语</option>
                    <option value="WL">物理</option>
                    <option value="HX">化学</option>
                    <option value="SW">生物</option>
                    <option value="ZZ">政治</option>
                    <option value="LS">历史</option>
                    <option value="DL">地理</option>
                    </select>
                </td>
            </tr>
            <tr>                
                 <td width="40%">专题</td>
                <td width="60%">
                    <select id="specielId2" name="specielId">
                        <option value="0">专题</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td width="40%">考点名称</td>
                <td width="60%">
                <input type="text" maxlength="20" placeholder="最多只能输入20个字符" id="examcentreName" name="examcentreName" style="width:250px;margin-right:5px" >
                </td>
            </tr>
        {{else}}
            <tr>
                <td width="40%">科目</td>
                <td width="60%">
                    <select id="subject3" name="subject" onchange="getSpeciel3(this.options[this.selectedIndex].value)">
                    <option value="KM">科目</option>
                    <option value="YW">语文</option>
                    <option value="SX">数学</option>
                    <option value="YY">英语</option>
                    <option value="WL">物理</option>
                    <option value="HX">化学</option>
                    <option value="SW">生物</option>
                    <option value="ZZ">政治</option>
                    <option value="LS">历史</option>
                    <option value="DL">地理</option>
                    </select>
                </td>
            </tr>
            <tr>                
                 <td width="40%">专题</td>
                <td width="60%">
                    <select id="specielId3" name="specielId">
                        <option value="0">专题</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td width="40%">考点名称</td>
                <td width="60%">
                <input type="text" maxlength="20" placeholder="最多只能输入20个字符" id="examcentreName2" name="examcentreName" value="${examcentreName}" style="width:250px;margin-right:5px">
                </td>
            </tr>
        {{/if}}
         </table>
    </article>
    <p class="tc">
        <input type="submit" class="btnFun" value="保存" onclick="addOrUpExa(0)">
        {{if examcentreId==0}}
        <input type="submit" class="btnFun" value="保存继续录入" onclick="addOrUpExa(1)">
        {{/if}}
        <a href="javascript:void(0)" class="btnFun" onclick="$(‘#formDiv‘).dialog(‘close‘);">取消</a>
    </p>
    </form>
    </script>
    
    <div class="formWrap hc" id="delDiv">
        <form class="infoTitle" id="baseform1" >
        <fieldset class="S_line2">
            <legend class="tit">删除信息确认</legend>
        </fieldset>
        <p>确认要删除吗？</p>
          <p class="tc">
              <a href="#" class="btnFun" onclick="srueDel()">确认</a>
              <a href="#" class="btnFun" onclick="$(‘#delDiv‘).dialog(‘close‘);">取消</a>
          </p>
          </form>
        </div>
    
        
    <p class="page" id="pagenav"></p>
    <script type="text/x-jquery-tmpl" id="pageitems">
    <a href="javascript:void(0)" onclick = "${purl}">${indexs}</a>
    </script>
    </div>
</div>
</body>
</html>

View Code

var titlePageSize = 10;
var linkNum = 4;
var pageno = 0;
var userId;
var id;

$(function() {
    checkUser();
    getPage(0);
});

function getSpeciel(subject) {
    $(‘#specielId‘).empty();
    $(‘#specielId‘).append("<option value=‘0‘>专题</option>");
    $("#detailTable tr[id!=indextr]").remove();
    if (subject != "KM") {
        $.ajax({
            url:‘/service/manage/examinee/getSpeciel‘,
            type:‘GET‘,
            async:false,
            dataType:‘json‘,
            data:‘subject=‘+subject,
            success: function(data){
                if(data!=""){
                    $("#specielitem").tmpl(data).appendTo("#specielId");
                    getPage(0);
                } else {
                    $(‘#specielId‘).empty();
                    $(‘#specielId‘).append("<option value=‘0‘>专题</option>");
                    $("#detailTable tr[id!=indextr]").remove();
                    $("#pagenav").empty();
                }
            }
        });
    } else {
        getPage(0);
    }
}

function getSpeciel2(subject) {
    $(‘#specielId2‘).empty();
    $(‘#specielId2‘).append("<option value=‘0‘>专题</option>");
    if (subject != "KM") {
        $.ajax({
            url:‘/service/manage/examinee/getSpeciel‘,
            type:‘GET‘,
            async:false,
            dataType:‘json‘,
            data:‘subject=‘+subject,
            success: function(data){
                if(data!=""){
                    $("#specielitem").tmpl(data).appendTo("#specielId2");
                } else {
                    $(‘#specielId2‘).empty();
                    $(‘#specielId2‘).append("<option value=‘0‘>专题</option>");
                }
            }
        });
    }
}

function getSpeciel3(subject) {
    $(‘#specielId3‘).empty();
    $(‘#specielId3‘).append("<option value=‘0‘>专题</option>");
    if (subject != "KM") {
        $.ajax({
            url:‘/service/manage/examinee/getSpeciel‘,
            type:‘GET‘,
            async:false,
            dataType:‘json‘,
            data:‘subject=‘+subject,
            success: function(data){
                if(data!=""){
                    $("#specielitem").tmpl(data).appendTo("#specielId3");
                } else {
                    $(‘#specielId3‘).empty();
                    $(‘#specielId3‘).append("<option value=‘0‘>专题</option>");
                }
            }
        });
    }
}

function getPage(currentPage){
    var args = $("#selectForm").serialize()+"&pageNo="+currentPage+"&pageSize="+titlePageSize;
    $.ajax({
        url:‘/service/manage/examinee/getExamineePage‘,
        type:‘GET‘,
        async:false,
        dataType:‘json‘,
        data :args,
        success : function(data) {
        $("#detailTable tr[id!=indextr]").remove();
            if(data.resultList!=""){
                pageno = currentPage;
                $("#detailList").tmpl(data.resultList).appendTo("#detailTable");
                if(data.sum>titlePageSize){
                    goPageTo(currentPage,data.sum);
                }else{
                    $("#pagenav").empty();
                }
            }else{
                $("#pagenav").empty();
            }
        }
    });
}

function upStatus(status,examcentreId,obj) {
    var args = "status="+status+"&examcentreId="+examcentreId;
    $.ajax({
        url : ‘/service/manage/examinee/upStatus‘,
        type : ‘POST‘,
        dataType : ‘json‘,
        async: false,
        data :args,
        success : function(data) {
            if (data == 1) {
                if (status == 0) {
                    $(‘#status‘+examcentreId).html(‘已启用‘);
                    $(obj).attr(‘onclick‘,‘upStatus(1,‘+examcentreId+‘,this)‘);
                    $(obj).html(‘停用‘);
                } else {
                    $(‘#status‘+examcentreId).html(‘未启用‘);
                    $(obj).attr(‘onclick‘,‘upStatus(0,‘+examcentreId+‘,this)‘);
                    $(obj).html(‘启用‘);
                }
            }else{
                alert("系统繁忙，请稍后再试！");
            }
        }
    });
}

function deleteExa(examcentreId) {
    id=examcentreId;
    $("#delDiv").dialog({
        modal : true,
        width : 300,
        height: 150,
    });
}

function srueDel() {
    var args = "examcentreId="+id;
    $.ajax({
        url : ‘/service/manage/examinee/deleteExa‘,
        type : ‘POST‘,
        dataType : ‘json‘,
        async: false,
        data :args,
        success : function(data) {
            if (data == 1) {
                getPage(pageno);
            }else{
                alert("系统繁忙，请稍后再试！");
            }
        }
    });
    $(‘#delDiv‘).dialog(‘close‘);
}

function popExa(examcentreId,specielId) {
    $("#formDiv").html("");
    if (examcentreId == 0) {
        var data = eval("[{‘examcentreId‘:‘0‘}]");
        $("#addVoTmpl").tmpl(data).appendTo("#formDiv");
    } else {
        var args = "examcentreId="+examcentreId+"&specielId="+specielId;
        $.ajax({
            url : ‘/service/manage/examinee/getExa‘,
            type : ‘GET‘,
            dataType : ‘json‘,
            async: false,
            data :args,
            success : function(data) {
                $("#addVoTmpl").tmpl(data).appendTo("#formDiv");
                $(‘#subject3‘).find(‘>option[value="‘+data.subject+‘"]‘).attr(‘selected‘,‘true‘);
                getSpeciel3(data.subject);
                $(‘#specielId3‘).find(‘>option[value="‘+data.specielId+‘"]‘).attr(‘selected‘,‘true‘);
            }
        });
    }
        
    $("#formDiv").dialog({
        modal : true,
        width : 646,
        minHeight : 87,
    });
}

function addOrUpExa(flag) {
    $("#baseform").validate({
        onkeyup:false,
        onsubmit:true,
        rules:{
            "specielId" : {
                min : 1,
            },
            "subject" : {
                subjectxxx : true,
            },
            "examcentreName" : {
                required: true,
            }
        },
        messages:{
            "specielId" : {
                min : "请选择专题",
            },
            "subject" : {
                subjectxxx : "请选择科目",
            },
            "examcentreName" : {
                required: "不能为空",
            }
        },
        errorElement:"font",
        errorPlacement: function(error, element){
            error.appendTo(element.parent());
            element.next().css("color","red");
        },
        success:"valid",
        submitHandler:function(form) {
            addOrUp(flag);
        }
    });
}

function addOrUp(flag) {
    checkUser();
    var args = $("#baseform").serialize()+"&createuser="+userId;
    $.ajax({
        url:‘/service/manage/examinee/addOrUpExa‘,
        type:‘POST‘,
        async:false,
        dataType:‘json‘,
        data :args,
        success : function(data) {
            if (data == 1) {
                if(flag == 0) {
                    $(‘#formDiv‘).dialog(‘close‘);
                    getPage(pageno);
                } else {
                    $(‘#subject2‘).val("KM");
                    $(‘#examcentreName‘).val("");
                    $(‘#specielId2‘).empty();
                    $(‘#specielId2‘).append("<option value=‘0‘>专题</option>");
                    getPage(pageno);
                }
            } else {
                alert("系统繁忙，请稍后再试！");
            }
        }
    });
}

function checkUser() {
    var cookie_key = $.cookie("JYT_SESSION_KEY");
    var args = "sessionKEY=" + cookie_key;
    $.ajax({
        url : ‘/service/manage/member/userinfo‘,
        type : ‘GET‘,
        data : args,
        async : false,
        dataType : ‘json‘,
        success : function(data) {
            if (data != null) {
                userId = data.userId;
            }
        }
    });
}

jQuery.validator.addMethod("subjectxxx", function(value, element) {
    if (value == ‘KM‘) {
        return false;
    } else {
        return true;
    }
},"请选择科目");

View Code

　　上一篇《【做一点、学一点】dtree、jquery.validate》里涉及到的另一部分代码！！

【做一点、学一点】dtree、jquery.validate我写的部分垃圾代码,布布扣,bubuko.com