【做一点、学一点】dtree、jquery.validate

首页 > 代码库 > 【做一点、学一点】dtree、jquery.validate

【做一点、学一点】dtree、jquery.validate

2024-07-03 19:21:12 237人阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知识点管理</title>
<!--#include file="/html/common/includeyf.html"-->
<link  type="text/css" href="/js/common/dtree/dtree.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/common/dtree/dtree.js"></script>
<script type="text/javascript" src="/js/baseinfo/kownlege/kownlege.js"></script>
</head>
<body>
<script type="text/x-jquery-tmpl" id="specialitem">
<option value="${specialId}">${specialName}</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="subject" name="subject" onchange="getSpecial(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="specialId" name="specialId" onchange="getKnowlegeList()">
                    <option value="0">专题</option>
                </select>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div class="searchList">
        <button id="add" onclick="popKn(-1,0)" style="display: none;">添加</button>
        <div class="dtree" id="dtreeDiv"></div>
    </div>
    <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 flag==0}}添加{{else}}{{if flag==-1}}添加{{else}}修改{{/if}}{{/if}}</legend>
        </fieldset>
          <table class="tableForm" style="table-layout:fixed">
        <input type="hidden" id="knowledgeId" name="knowledgeId" value="${knowledgeId}">
        <input type="hidden" name="specialId" value="${specialId}">
        <input type="hidden" name="flag" value="${flag}">
          {{if flag==0}}
            <tr>                
                 <td width="40%">专题</td>
                <td width="60%">
                    ${special}
                </td>
            </tr>
            <tr>
                <td width="40%">知识点名称</td>
                <td width="60%">
                <input type="text" maxlength="20" placeholder="最多只能输入20个字符" id="knowledgeName1" name="knowledgeName" style="width:250px;margin-right:5px" >
                </td>
            </tr>
            <tr>
                <td width="40%">知识点内容</td>
                <td width="60%">
                <input type="text"  maxlength="30" placeholder="最多只能输入30个字符" id="content1" name="content" style="width:250px;margin-right:5px" >
                </td>
            </tr>
        {{else}}
        {{if flag==-1}}
            <tr>                
                 <td width="40%">专题</td>
                <td width="60%">
                    ${special}
                </td>
            </tr>
            <tr>
                <td width="40%">知识点名称</td>
                <td width="60%">
                <input type="text" maxlength="20" placeholder="最多只能输入20个字符" id="knowledgeName2" name="knowledgeName" style="width:250px;margin-right:5px" >
                </td>
            </tr>
            <tr>
                <td width="40%">知识点内容</td>
                <td width="60%">
                <input type="text" maxlength="30" placeholder="最多只能输入30个字符" id="content2" name="content" style="width:250px;margin-right:5px" >
                </td>
            </tr>
        {{else}}
            <tr>                
                 <td width="40%">专题</td>
                <td width="60%">
                    ${special}
                </td>
            </tr>
            <tr>
                <td width="40%">知识点名称</td>
                <td width="60%">
                <input type="text" maxlength="20" placeholder="最多只能输入20个字符" id="knowledgeName3" name="knowledgeName" value="${knowledgeName}" style="width:250px;margin-right:5px" >
                </td>
            </tr>
            <tr>
                <td width="40%">知识点内容</td>
                <td width="60%">
                <input type="text" maxlength="30" placeholder="最多只能输入30个字符" id="content3" name="content" value="${content}" style="width:250px;margin-right:5px" >
                </td>
            </tr>
        {{/if}}
        {{/if}}
         </table>
    </article>
    <p class="tc">
        <input type="submit" class="btnFun" value="保存" onclick="addOrUpdateKn(0)">
        {{if flag==0}}
        <input type="submit" class="btnFun" value="保存继续录入" onclick="addOrUpdateKn(1)">
        {{else}}{{if flag==-1}}
        <input type="submit" class="btnFun" value="保存继续录入" onclick="addOrUpdateKn(1)">
        {{/if}}{{/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>
</div>
</body>
</html>

View Code

var delid;
var params = new Array();

function getSpecial(subject) {
    $(‘#specialId‘).empty();
    $(‘#specialId‘).append("<option value=http://www.mamicode.com/‘0‘>专题");
    $("#dtreeDiv").empty();
    $(‘#add‘).attr(‘style‘,‘display: none;‘);
    if (subject != "KM") {
        $.ajax({
            url:‘/service/manage/knowlege/getSpecial‘,
            type:‘GET‘,
            async:false,
            dataType:‘json‘,
            data:‘subject=‘+subject,
            success: function(data){
                if(data!=""){
                    $("#specialitem").tmpl(data).appendTo("#specialId");
                } else {
                    $(‘#specialId‘).empty();
                    $(‘#specialId‘).append("<option value=http://www.mamicode.com/‘0‘>专题");
                    $("#dtreeDiv").empty();
                }
            }
        });
    }
}

function getKnowlegeList(){
    $("#dtreeDiv").empty();
    var specialId = $(‘#specialId‘).val();
    if (specialId == 0) {
        $(‘#add‘).attr(‘style‘,‘display: none;‘);
    } else {
        $(‘#add‘).attr(‘style‘,‘display: display;‘);
        var args = $("#selectForm").serialize();
        $.ajax({
            url : ‘/service/manage/knowlege/getKnowlegeList‘,
            type : ‘GET‘,
            dataType : ‘json‘,
            async: false,
            data :args,
            success : function(data) {
                if(data.length!=0){
                    d = new dTree(‘d‘);
                    d.config.useCookies = false;
                    d.config.useSelection = false;
                    d.add(0,-1,‘知识点&nbsp;&nbsp;<a href=http://www.mamicode.com/"javascript: d.openAll();\">展开</a> | <a href=http://www.mamicode.com/"javascript: d.closeAll();\">收起</a> ‘);
                    for(var i=0;i<data.length;i++){
                        d.add(data[i].knowledgeId,data[i].parentId,data[i].knowledgeName +
                                "<input type=‘hidden‘ name=‘ids‘ value=http://www.mamicode.com/‘"+data[i].knowledgeId+"‘>"+
                                "<input type=‘hidden‘ id=‘knowledgeName"+data[i].knowledgeId+"‘ value=http://www.mamicode.com/‘"+data[i].knowledgeName+"‘>"+
                                "<input type=‘hidden‘ id=‘content"+data[i].knowledgeId+"‘ value=http://www.mamicode.com/‘"+data[i].content+"‘>"+
                                "<input type=‘hidden‘ id=‘parentId"+data[i].knowledgeId+"‘ value=http://www.mamicode.com/‘"+data[i].parentId+"‘>"+
                                "<input type=‘hidden‘ id=‘isLeaf"+data[i].knowledgeId+"‘ value=http://www.mamicode.com/‘"+data[i].isLeaf+"‘>"+
                                "<button onclick=‘popKn(0,"+data[i].knowledgeId+")‘>添加</button>" +
                                "<button onclick=‘popKn("+data[i].knowledgeId+","+data[i].knowledgeId+")‘>修改</button>" +
                                "<button onclick=‘deleteKn("+data[i].knowledgeId+")‘>删除</button>");
                    }
                    document.getElementById("dtreeDiv").innerHTML=d;
                    d.closeAll();
                }
            }
        });
    }
}

function popKn(flag,knowledgeId) {
    $("#formDiv").html("");
    var specialId = $(‘#specialId‘).val();
    var special = $(‘#specialId‘).find("option:selected").text();;
    if (flag == 0 || flag==-1) {
        var data = http://www.mamicode.com/eval("[{‘knowledgeId‘:‘"+knowledgeId+"‘,‘flag‘:‘"+flag+"‘,‘special‘:‘"+special+"‘,‘specialId‘:‘"+specialId+"‘}]");
        $("#addVoTmpl").tmpl(data).appendTo("#formDiv");
    } else {
        var knowledgeName = $(‘#knowledgeName‘+knowledgeId).val();
        var content = $(‘#content‘+knowledgeId).val();
        var json = "{‘knowledgeId‘:‘"+knowledgeId+"‘,‘flag‘:‘"+flag+"‘,‘special‘:‘"+special+"‘,‘specialId‘:‘"+specialId+"‘}";
        var data = http://www.mamicode.com/eval("["+json+"]");
        $("#addVoTmpl").tmpl(data).appendTo("#formDiv");
        $(‘#specialId3‘).find(‘>option[value="http://www.mamicode.com/‘+specialId+‘"]‘).attr(‘selected‘,‘true‘);
        $(‘#knowledgeName3‘).val(knowledgeName);
        $(‘#content3‘).val(content);
    }
    $("#formDiv").dialog({
        modal : true,
        width : 646,
        minHeight : 87,
    });
}

function addOrUpdateKn(flag) {
    $("#baseform").validate({
        onkeyup:false,
        onsubmit:true,
        rules:{
            "knowledgeName" : {
                required: true,
            },
            "content" : {
                required: true,
            }
        },
        messages:{
            "knowledgeName" : {
                required: "名称不能为空",
            },
            "content" : {
                required: "内容不能为空",
            }
        },
        errorElement:"font",
        errorPlacement: function(error, element){
            error.appendTo(element.parent());
            element.next().css("color","red");
        },
        success:"valid",
        submitHandler:function(form) {
            addOrUpdate(flag);
        }
    });
}

function addOrUpdate(flag) {
    
    var args = $("#baseform").serialize();
    $.ajax({
        url:‘/service/manage/knowlege/addOrUpdateKn‘,
        type:‘POST‘,
        async:false,
        dataType:‘json‘,
        data :args,
        success : function(data) {
            if (data =http://www.mamicode.com/= 1) {
                if(flag == 0) {
                    $(‘#formDiv‘).dialog(‘close‘);
                    getKnowlegeList();
                } else {
                    $(‘input[name="knowledgeName"]‘).val("");
                    $(‘input[name="content"]‘).val("");
                    getKnowlegeList();
                }
            } else {
                alert("系统繁忙，请稍后再试！");
            }
        }
    });
}

function deleteKn(knowledgeId) {
    params.push(knowledgeId);
//    alert($(‘#content‘+knowledgeId).parent(‘.node‘).parent(‘.dTreeNode‘).next(‘.clip‘).find(‘input[name="ids"]‘).val());
    for(var i=0 ; i<$(‘#content‘+knowledgeId).parent(‘.node‘).parent(‘.dTreeNode‘).next(‘.clip‘).find(‘input[name="ids"]‘).length ; i++){
        params.push($(‘#content‘+knowledgeId).parent(‘.node‘).parent(‘.dTreeNode‘).next(‘.clip‘).find(‘input[name="ids"]:eq(‘+i+‘)‘).val());
    }
    $("#delDiv").dialog({
        modal : true,
        width : 300,
        height: 150,
    });
}

function srueDel() {
    var args = "params="+params;
    $.ajax({
        url : ‘/service/manage/knowlege/deleteKn‘,
        type : ‘POST‘,
        dataType : ‘json‘,
        async: false,
        data :args,
        success : function(data) {
            if (data =http://www.mamicode.com/= 1) {
                getKnowlegeList();
            }else{
                alert("系统繁忙，请稍后再试！");
            }
        }
    });
    $(‘#delDiv‘).dialog(‘close‘);
}

View Code

　　坑了我两天的代码，新手入职一个月，没学过js，平时都是靠度娘边学边做，这两天给了我一个关于dtree的任务，首先了解dtree花费了我一天时间，为了动态生成这个树结构，我花费了好久时间，一直在琢磨，终于能够生成这个树结构；随后为了完成删除父节点以及子节点，想了好多方法，写了好多demo就是不成功，最后经过别人指点

alert($(‘#content‘+knowledgeId).parent(‘.node‘).parent(‘.dTreeNode‘).next(‘.clip‘).find(‘input[name="ids"]‘).val());

终于拿到了，父节点以及子节点所有的id值。

　　之后为了做一个验证(jquery.validate)，之前就做过验证并且成功了，这次用很快速度完成了验证的js代码

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);
        }
    });
}

View Code

　　可是死活出不来验证结果，但是通过审查元素发现表单是有变化的，但是为什么出不来验证提示，最后发现我的提交按钮用的是<a>提交</a>实现的，改成<input type="submit">就好了，这里记下来。

　　然后是关于select的验证，我的两个select一个的value是数字一个是字符串，数字的很好的用min实现了，可是字符串的不知道怎么实现，最后我通过查找资料，添加验证规则实现了select字符串的验证

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

View Code

　　终于舒了一口气，这两天的任务可累死，但是也学到了很多东西，除了技术上的各种难题，我也深深感觉到业务逻辑对于程序员的重要性，代码写的再好，对于业务的把握不够准确，写出来的代码也是废品。

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 【做一点、学一点】dtree、jquery.validate

【做一点、学一点】dtree、jquery.validate

看完仍有疑问？有类似问题直接问程序猿