首页 > 代码库 > 【做一点、学一点】dtree、jquery.validate
【做一点、学一点】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=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,‘知识点 <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‘); }
坑了我两天的代码,新手入职一个月,没学过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 =http://www.mamicode.com/= ‘KM‘) { return false; } else { return true; } },"请选择科目");
终于舒了一口气,这两天的任务可累死,但是也学到了很多东西,除了技术上的各种难题,我也深深感觉到业务逻辑对于程序员的重要性,代码写的再好,对于业务的把握不够准确,写出来的代码也是废品。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。