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 前台 累计计算树值 提交后台的更多相关文章

  1. form表单提交，后台怎么获取select的值？后台直接获取即可，和input方式一样。

    form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...

  2. 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的路由方案,与原来的方案在使用上差别不 ...

  3. geotrellis使用（十七）使用缓冲区分析的方式解决单瓦片计算边缘值问题

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求分析 实现方案 总结 一.前言        最 ...

  4. 打造颠覆你想象中的高性能，轻量级的webform框架---无刷新提交后台并返回参数（第五天）

    问题5:  使用aspx 页面执行后台方法,总是要刷新整个页面?我想提交后台不刷新页面,同时返回参数 执行前台的js 脚本,就是说类似于像 ajax 的效果一样,那我们该怎么做呢? 大家是否已经看了前 ...

  5. .Net NPOI 上传excel文件、提交后台获取excel里的数据

    1.导入NPOI.dll 2.添加类NPOIExcel.cs using System; using System.Collections.Generic; using System.Text; us ...

  6. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  7. C#实现像Git那样计算Hash值

    从Git Tip of the Week: Objects一文中得知,Git是这样计算提交内容的Hash值的: Hash算法用的是SHA1 计算前,会在内容前面添加"blob 内容长度\0& ...

  8. 前台通过form表单向Django后台传输数据，Django处理后返回给前台

    摘要:Django前后台数据传递 通过action将数据传输给apitest这个地址,使用get方法传递,此处需要传递name="request_method"的下拉列表值和nam ...

  9. ylbtech-Unitity-cs:计算阶乘值

    ylbtech-Unitity-cs:计算阶乘值 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, using System; namespace Functions { public ...

随机推荐

  1. bugs

    2016-09-04 10:24:14.503 Scgl[1035:341694] You've implemented -[<UIApplicationDelegate> applica ...

  2. Find Missing Term in Arithmetic Progression 等差数列缺失项

    查找等差数列中的缺失项. e.g.Input: arr[] = {2, 4, 8, 10, 12, 14} Output: 6 Input: arr[] = {1, 6, 11, 16, 21, 31 ...

  3. python正则

    1.. 匹配任意除换行符"\n"外的字符:2.*表示匹配前一个字符0次或无限次:3.+或*后跟?表示非贪婪匹配,即尽可能少的匹配,如*?重复任意次,但尽可能少重复:4. .*? 表 ...

  4. 在 shell 脚本获取 ip、数字转换等网络操作

    在 shell 脚本获取 ip.数字转换等网络操作 ip 和数字的相互转换 ip转换为数字 :: function ip2num() { local ip=$1 local a=$(echo $ip ...

  5. WPF打包32位和64位程序 运行在ghost WIN7上问题

    WIN10,VS2015,编译平台"anycpu".WIN7系统为ghost版 1. 在.NET4.5下编译,程序打包以后,在WIN7上运行界面启动有3.4秒的延迟:将.NET版本 ...

  6. jsp页面传参大汇总-转帖收藏

    http://blog.csdn.net/ssy_shandong/article/details/9328985/

  7. The connection to adb is down, and a severe error has occured.（转）

    启动android模拟器时.有时会报The connection to adb is down, and a severe error has occured.的错误.在网友说在任务管理器上把所有ad ...

  8. [Core] .NET Core & VS Code 之路(2) Web API

    开发Core项目的条件 Visual Studio 2015 Update 3 .NET Core 1.0.0 - VS 2015 Tooling Preview 2 看到VS包的体积,以及不想往下走 ...

  9. SCRUM 流程的步骤2: Spring 计划

    1. product backlog. 2. 把故事进一步拆分成任务.   5. 形成Sprint backlog. Scrum master隆重登场,组织大家按照SCRUM流程,步步为营顺利开展工作 ...

  10. php7.0.12 laravel 链接sqlserver数据库

    https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载最后一个,然后这个工具可以将dll扩展下载下来,选择一个空白的文件夹就 ...