asp.net浏览器向服务器提交json格式的数据
原型界面如下
喎? f/ware/vc/"="" target="_blank" class="keylink">vcd4kpggxpr7fzow5pstcpc9omt4kpha+pc9wpgo8cd4gicagicagidghos/cwk2/8qo6tq/mrldztqjk/b7dv+lk/b7do7s8l3a+cjxwpiagicagicagmqgiobamizqzo6gxsltfpao6taw798qxo6zu2rjdzpxp7ss/tctwsb3tz8k3vcztvnpsu8z10mk1xl2xs83m9cs/o7s8l3a+cjxwpiagicagicagm6giobatobgwtmwlo7rwu9pq0rvm9b2xs83m9cs/yrgjrmflv9xk5mjrv/le2sjdo6y38dtyo6zjvrp9umo9sbpnzpxev6o7pc9wpgo8cd4gicagicagidshosihz/uwtmwlo7q1pbv3y6lqwtkzw+y8l3a+cjxwpiagicagicagnagisao05rc0xawjurwlu/fksaos0enwpnpdu6fk5mjr0mxporxe1f3it9duo6y9q9pdu6fk5mjr0mxpotequ7voqmpzb24mizi2njg0o8q9tctk/b7do6yw0wpzb24mizi2njg0o8q9tctk/b7d0uyyvczhvbu4+lf+zvhg9zwvcd4kpha+pgjypgo8l3a+cjxomt6+38zlyrxp1jwvade+cjxomj7ss8pm1krl2mtayn0oym9kectayn0ppc9omj4kpggzprt6wus8l2gzpgo8cd48chjlignsyxnzpq=="brush:java;">
市直单位名称:
奖惩项目名称: 分数:
页面元素由3大块内容组成,具体看原型图,其中最为关键的内容就是第二部分,实现动态增加元素的功能,利用节点的克隆来实现。
“+”按钮功能的实现
代码
//添加新的奖惩项目 function addrow(id) { //获得内层p元素节点 var selementnode = document.getelementbyid(id).parentnode; //克隆一套新的标签元素(内层p):奖惩名称和分数 var clonedelementnode = selementnode.clonenode(true); //设置克隆的属性(id和value) 没有对克隆的属性进行设置也没有什么影响 //1、获得新一套标签元素的统一标号 var newid = parseint($("input[value = '+']").length); //2、设置p的id clonedelementnode.id = "s" + newid; //3、设置p内部元素的属性 clonedelementnode.childnodes.item(1).id = "txtaddname" + newid; $(clonedelementnode.childnodes.item(1)).val("编辑"); clonedelementnode.childnodes.item(3).id = "txtaddcount" + newid; $(clonedelementnode.childnodes.item(3)).val("编辑"); clonedelementnode.childnodes.item(5).id = "cmdadd" + newid; $(clonedelementnode.childnodes.item(5)).val("+"); clonedelementnode.childnodes.item(7).id = "cmddel" + newid; $(clonedelementnode.childnodes.item(7)).val("-"); //将克隆元素添加到外层div中 //1、外层p元素节点 var felementnode = selementnode.parentnode; //2、添加 if (felementnode.lastchild == selementnode) { //当前节点为最后一个元素节点 felementnode.appendchild(clonednode); } else { //当前节点不是最后一个元素节点 felementnode.insertbefore(clonedelementnode, selementnode.nextsibling); } }
对于克隆出来的元素的属性,可以重新定义,也可以不用,因为后面都是通过元素的class属性进行操作的。
“-”按钮功能的实现
代码
//删除选中的奖惩项目 function delrow(id) { //1、获取当前节点的内层p var selementnode = document.getelementbyid(id).parentnode; //2、获取当前节点的外层p var felementnode = selementnode.parentnode; //3、删除内层p if (felementnode.childnodes.length > 3) { //a、元素节点大于2 felementnode.removechild(selementnode); } else { //b、只有一个元素节点 $(selementnode.childnodes.item(1)).val(""); $(selementnode.childnodes.item(3)).val(""); $(selementnode.childnodes.item(5)).val("+"); $(selementnode.childnodes.item(7)).val("-"); } }
这里对于是否只有一条奖惩条目的判断,用的是孩子节点,因孩子节点包括了所有的节点类型(文本节点,元素节点,注释节点),所以,在代码中会看到3(注释为注释节点,注释的两边有相应的空格,分别为一个文本节点)
取消按钮功能的实现
代码
//取消按钮,重新加载页面 function reload() { window.location.href = "cityaddinput.aspx"; }
保存按钮功能的实现
代码
//保存奖惩项目 function saveadd() { //有效性验证 if ($('#cc1').combobox('gettext') == "") { alert("请选择市直单位名称!"); return; } //获得奖惩项目的个数 var txtnamecount = parseint($("input[name='txtname']").length); //获得所有奖惩项目名称节点 var txtallname = document.getelementsbyname("txtname"); //获得所有奖惩项目分数节点 var txtallcount = document.getelementsbyname("txtcount"); //有效性输入的判断 for (var i = 0; i
json.stringify(object)可以把一个对象转换为json数据格式的字符串
文本框获得焦点的相应代码
//点击编辑的时候如果内容为编辑的话那就把value值清空,如果不是的话证明人家已经编写了就不清空了 function iffull(txtelementnode) { if (txtelementnode.value == "编辑") { txtelementnode.value = ""; } }
总结
一个大的功能,分割成多个小的功能,然后确定一个实现的流程喎?>
上一篇: .NET MVC 扩展方法必须在非泛型静态类中定义
下一篇: PHP树形结构tree类用法示例