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

2020-12-13 02:31

阅读：302

标签：style blog class code java tar

DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>知识点管理title>

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("");
    $("#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("");
                    $("#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,‘知识点  展开 | 收起 ‘);
                    for(var i=0;i){
                        d.add(data[i].knowledgeId,data[i].parentId,data[i].knowledgeName +
                                ""+
                                ""+
                                ""+
                                ""+
                                ""+
                                "" +
                                "" +
                                "");
                    }
                    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 = 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 = eval("["+json+"]");
        $("#addVoTmpl").tmpl(data).appendTo("#formDiv");
        $(‘#specialId3‘).find(‘>option[value="‘+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 == 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){
        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 == 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

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

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

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

View Code

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

【做一点、学一点】dtree、jquery.validate,搜素材,soscw.com

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

标签：style blog class code java tar

原文地址：http://www.cnblogs.com/codecup/p/3718494.html

上一篇：php引用详解

下一篇：thinkphp框架

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【做一点、学一点】dtree、jquery.validate
文章链接：http://soscw.com/essay/25762.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章