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

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

var delid;

var params = new Array();


function getSpecial(subject) {

    $(‘#specialId‘).empty();

    $(‘#specialId‘).append("<option value=‘0‘>专题</option>");

    $("#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=‘0‘>专题</option>");

                    $("#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=\"javascript: d.openAll();\">展开</a> | <a href=\"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=‘"+data[i].knowledgeId+"‘>"+

                                "<input type=‘hidden‘ id=‘knowledgeName"+data[i].knowledgeId+"‘ value=‘"+data[i].knowledgeName+"‘>"+

                                "<input type=‘hidden‘ id=‘content"+data[i].knowledgeId+"‘ value=‘"+data[i].content+"‘>"+

                                "<input type=‘hidden‘ id=‘parentId"+data[i].knowledgeId+"‘ value=‘"+data[i].parentId+"‘>"+

                                "<input type=‘hidden‘ id=‘isLeaf"+data[i].knowledgeId+"‘ value=‘"+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 = 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<$(‘#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 == 1) {

                getKnowlegeList();

            }else{

                alert("系统繁忙，请稍后再试！");

            }

        }

    });

    $(‘#delDiv‘).dialog(‘close‘);

}

　　坑了我两天的代码，新手入职一个月，没学过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);

        }

    });

}

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

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

jQuery.validator.addMethod("subjectxxx", function(value, element) {

    if (value == ‘KM‘) {

        return false;

    } else {

        return true;

    }

},"请选择科目");

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

时间： 2025-01-17 20:18:52

【做一点、学一点】dtree、jquery.validate的相关文章

jQuery.Validate验证库

一.用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html 当前版本:1.5.5 需要JQuery版本:1.2.6+, 兼容 1.3.2 二.默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php

jQuery Validate （1）

一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html 当前版本:1.5.5需要JQuery版本:1.2.6+, 兼容 1.3.2<script src="../js/jquery.js" type="text/javascript"></s

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>考点管理</title> <!--#include file="/html/common/includeyf.html"--> <script type="text/javascript" src="/js/baseinfo/ex

学一点 MYSQL 双机异地热备份—-MYSQL主从，主主备份原理及实践

简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做的好处多. 1. 可以做灾备,其中一个坏了可以切换到另一个. 2. 可以做负载均衡,可以将请求分摊到其中任何一台上,提高网站吞吐量.  对于异地热备,尤其适合灾备.废话不多说了.我们直接进入主题. 我们会主要介绍两部分内容: 一, mysql 备份工作原理 二, 备份实战 我们开始. 我使用的是my

稍微学一点项目管理

稍微学一点项目管理的相关知识. 项目管理是管理什么 项目管理的主要内容是交付管理.客户管理.人员管理和过程管理. 交付管理. 说白了就是要保证项目的按时交付,为了达到这样的目的,作为项目负责人需要关注交付范围.预算.人员计划和发布计划,并且需要实时监控项目进展,评估是否有潜在风险并给出应对措施. 客户管理. 有些团队可能没有我们平常意义上的客户,但是每一个客户都有一个广义上的客户.你可以认为你是Boss就是你的客户,或者是说甲方就是一个客户.作为团队的管理者,客户的所有沟通.合作都是你的职责.

unity3D与网页的交互 做项目的一点总结

http://www.游戏蛮牛.com/forum.php?mod=viewthread&tid=15507&page=1&authorid=1235 unity3D与网页的交互 做项目的一点总结,布布扣,bubuko.com

罗辑思维2014 第11集 迷茫时代的明白人（慢慢来，能做一点是一点）

活在当下的意思,好像是说事情慢慢来,能做一点是一点,能拱一点是一点,既不要沉溺于过去的失败或者光荣(左宗棠),也不要太对未来痴心妄想(张之洞). 只有李鸿章是躺着也睁眼,张之洞是跑着也闭眼. 罗胖认为:借钱给别人,这种难题,其实只是未来的难题,为没有发生的事情去担心. 你不要想未来怎么样,你就利用现在的资源,做一件在现在岗位上最漂亮的事情.不要为KPI去考虑,也不要去考虑自己过去的才能. 不要为KPI去考虑,也不要去考虑自己过去的才能.因为情况变了嘛. 最好的方案,就是学习李鸿章,活在当下,就从

linux中的more的用法(每天学一点linux)

每天学一点linux 定义和用法 linux more命令,功能类似 cat 命令,more以分页的显示形式显示内容. 按空白键(space)就往下一页显示,按 b 键就会往回(back)一页显示 例子 # 显示文件中从第5行起的内容 more +5 log2014.log # 从文件中查找第一个出现"day3"字符串的行 more +/day3 log2014.log # 设定每屏显示行数 more -5 log2014.log # 每页显示5个文件信息,按 Ctrl+F 或者 空格

关于如何做自动化测试和何时做自动化测试的一点见解和疑问

中华传统文化源于<易>,成于孝,孝为德之本.孝顺:孝则顺,不孝则不顺. 不久前,参加Thoughtworks组织的一场自动化测试的分享,同事由于出差国外不能参加,特意嘱托我提问两个问题: 在互联网这个将"敏捷"与"持续集成"进行积极实践的环境里,"敏捷测试"与"自动化测试"成了一个大家经常探讨的话题, 那么自动化测试最佳的实行时间是在什么时候?如何推行最有效的自动化测试? 以下谨代表个人观点: 个人整理了一些测试最