treetable 前台累计计算树值提交后台

treetable 累计计算树值

效果图

html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>树表控件</title>

        <link href="./style/demo.css" rel="stylesheet" type="text/css" />

        <style type="text/css">

        table,td,th {  border: 1px solid #8DB9DB; padding:5px; border-collapse: collapse; font-size:16px; }

        </style>

        <!--引用的文件 Begin-->

        <script type="text/javascript" src="./script/jquery.js"></script>

        <script src="./script/treeTable/jquery.treeTable.js" type="text/javascript"></script>

        <!--引用的文件 End-->

        <script type="text/javascript">

            $(function(){

                var option = {

                    theme:'vsStyle',

                    expandLevel : 2,

                    beforeExpand : function($treeTable, id) {

                        //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用

                        if ($('.' + id, $treeTable).length) { return; }

                        //这里的html可以是ajax请求

                        var html = '<tr id="8" pId="6"><td>5.1</td><td>15</td></tr>'

                            + '<tr id="9" pId="6"><td>5.2</td><td>5</td></tr>';

                        $treeTable.addChilds(html);

                    },

                    onSelect : function($treeTable, id) {

                        window.console && console.log('onSelect:' + id);

                    }

                };

                $('#treeTable1').treeTable(option);

                option.theme = 'default';

                $('#treeTable2').treeTable(option);

            });

        </script>

    </head>

    <body>

    <div id="page">

        <fieldset>

            <table id="treeTable1" style="width:100%">

                <tr>

                    <td style="width:200px;">标题</td>

                    <td>金额</td>

                </tr>

                <tr id="val_1">

                    <td><span controller="true">1</span></td>

                    <td>100</td></tr>

                <tr id="val_2" pId="val_1">

                    <td><span controller="true">2</span></td>

                    <td>100</td></tr>

                <tr id="val_3" pId="val_2">

                    <td>3</td>

                    <td>60</td>

                </tr>

                <tr id="val_4" pId="val_2">

                    <td>4</td>

                    <td>40</td>

                </tr>

                <tr id="val_5" pId="val_4">

                    <td>4.1</td>

                    <td>40</td>

                </tr>

                <tr id="val_7">

                    <td>8</td>

                    <td>100</td>

                </tr>

            </table>

            <hr/>

        </fieldset>

        <input type="button" value="Test" onclick="GetValues()" />

    </div>

    <script>

        $(function () {

            $("table td:odd").css("background-color", "#ece9d8");

            var numId = $("table td:odd");

            //给单元格注册鼠标点击事件

            numId.click(function ()

            {

                //找到对应当前鼠标点击的td，this对应的就是响应了click的那个td

                var tdObj = $(this);

                if (!CheckLast(tdObj)) {

                    return;

                }

                //判断td中是否有文本框

                if (tdObj.children("input").length > 0) {

                    return false;

                }

                //获取表格中的内容

                var text = tdObj.html();

                //清空td中的内容

                tdObj.html("");

                var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj);

                inputObj.trigger("focus").trigger("select");

                inputObj.click(function () {

                    return false;

                });

                //处理文本框上回车和esc按键的操作

                inputObj.keyup(function (event) {

                    var keycode = event.which;

                    //处理回车的情况

                    if (keycode == 13) {

                        var inputtext = $(this).val();

                        if (!CheckNumber(inputtext)) {

                            return false;

                        }

                        //将td中的内容修改为文本框的内容

                        tdObj.text(inputtext);

                        GetSum(tdObj);

                    }

                    //处理esc的内容

                    if (keycode == 27) {

                        //将td中的内容还原成原来的内容

                        tdObj.text(text);

                        //GetSum(tdObj);

                    }

                });

                inputObj.blur(function (event) {

                    var inputtext = $(this).val();

                    if (!CheckNumber(inputtext)) {

                        //tdObj.text(text);

                        $(this).focus();

                        return false;

                    }

                    tdObj.text(inputtext);

                    GetSum(tdObj);

                });

            });

        });

        function CheckNumber(val) {

            if (isNaN(val)) {

                alert("请填写数字");

                return false;

            } else {

                return true;

            }

        }

        function GetSum(obj) {

            var currentClickIdValue = obj.parent().attr("id");

            var currentClickpIdValue = obj.parent().attr("pId");

            var currentClickTxtValue = obj.text();

            var objs = $("#treeTable1").find("tr");

            var sumval = 0;

            for (var i = 0; i < objs.length; i++) {

                if ($(objs[i]).attr("pId") == currentClickpIdValue) {

                    sumval += parseFloat($(objs[i]).children('td').eq(1).text());

                }

            }

            $("#" + currentClickpIdValue).children('td').eq(1).text(sumval);

            if ($("#" + currentClickpIdValue).attr("pId")) {

                GetSum($("#" + currentClickpIdValue).children('td').eq(1));

            }

        }

        function CheckLast(obj) {

            var currentClickIdValue = obj.parent().attr("id");

            var objs = $("#treeTable1").find("tr");

            for (var i = 0; i < objs.length; i++) {

                if ($(objs[i]).attr("pId") == currentClickIdValue) {

                    return false;

                }

            }

            return true;

        }

        function GetValues() {

            var lst = [];

            var objs = $("#treeTable1").find("tr");

            for (var i = 0; i < objs.length; i++) {

                if ($(objs[i]).attr("id")) {

                    var ent = {};

                    ent.id = $(objs[i]).attr("id").replace("val_", "");

                    ent.val = $(objs[i]).children('td').eq(1).text();

                    lst.push(ent);

                }

            }

            alert(JSON.stringify(lst));

        }

    </script>

    </body>

</html>

treetable 前台累计计算树值提交后台的更多相关文章

form表单提交，后台怎么获取select的值？后台直接获取即可，和input方式一样。
form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...
ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 try.dot.net 的正确使用姿势 .Net NPOI 根据excel模板导出excel、直接生成excel .Net NPOI 上传excel文件、提交后台获取excel里的数据
ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 ASP.NET Core 从2.2版本开始,采用了一个新的名为Endpoint的路由方案,与原来的方案在使用上差别不 ...
geotrellis使用（十七）使用缓冲区分析的方式解决单瓦片计算边缘值问题
Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录前言需求分析实现方案总结一.前言最 ...
打造颠覆你想象中的高性能，轻量级的webform框架---无刷新提交后台并返回参数（第五天）
问题5: 使用aspx 页面执行后台方法,总是要刷新整个页面?我想提交后台不刷新页面,同时返回参数执行前台的js 脚本,就是说类似于像 ajax 的效果一样,那我们该怎么做呢? 大家是否已经看了前 ...
.Net NPOI 上传excel文件、提交后台获取excel里的数据
1.导入NPOI.dll 2.添加类NPOIExcel.cs using System; using System.Collections.Generic; using System.Text; us ...
EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
C#实现像Git那样计算Hash值
从Git Tip of the Week: Objects一文中得知,Git是这样计算提交内容的Hash值的: Hash算法用的是SHA1 计算前,会在内容前面添加"blob 内容长度\0& ...
前台通过form表单向Django后台传输数据，Django处理后返回给前台
摘要:Django前后台数据传递通过action将数据传输给apitest这个地址,使用get方法传递,此处需要传递name="request_method"的下拉列表值和nam ...
ylbtech-Unitity-cs:计算阶乘值
ylbtech-Unitity-cs:计算阶乘值 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1, using System; namespace Functions { public ...

随机推荐

ACM集训的第。。。诶~不知道第几题=.=
题目: 郭铮鹏认为排序是一种很频繁的计算任务,所以他考虑了一个简单的问题:现在最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2 ...
Android 自定义spinner下拉框实现
一:前言本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去网 ...
PHP无限极分类，多种方法|很简单，这里说的很详细，其它地方说的很不好懂
当你学习php无限极分类的时候,大家都觉得一个字"难"我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一 ...
python中常用的模块的总结
1. 模块和包 a.定义: 模块用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件.(例如:文件名:test.py,对应的模块名:test) ...
SpringMVC源码剖析（四）- DispatcherServlet请求转发的实现
SpringMVC完成初始化流程之后,就进入Servlet标准生命周期的第二个阶段,即“service”阶段.在“service”阶段中,每一次Http请求到来,容器都会启动一个请求线程,通过serv ...
前端forEach在Array、map、set中的使用
数组: var s = ['a','b','c']; s.forEach(function(ele,index,array){ console.log(ele); }); Map: var map = ...
css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
android aidl
参考: http://blog.csdn.net/u014614038/article/details/48399935 本文提供了一个关于AIDL使用的简单易懂的例子,分为客户端和服务端两部分,分别 ...
try,catch,finally含return时的执行顺序及丢失的伪例
最近面试遇到一个之前也看到过但没去看一下的问题.就是有return情况下的try,catch,finally的执行顺序. 今天写了下. 先看顺序问题.总结如下: 一:finally中没有写return ...
Oracle基本sql操作
1.查询用户下的所有表查询用户下的所有表 select distinct table_name from user_tab_columns; 2.搜索出前N条记录 Select a.*,rownum ...

treetable 前台 累计计算树值 提交后台

treetable 前台 累计计算树值 提交后台的更多相关文章

随机推荐

热门专题

treetable 前台累计计算树值提交后台

treetable 前台累计计算树值提交后台的更多相关文章