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. MySql常用日期函数(转载)

    /*date_add(date,interval expr type)和date_sub(date,interval expr type)执行日期运算. date 是一个 datetime 或date ...

  2. JMeter学习-036-JMeter调试工具之三---Debug Sampler

    前面两篇文章分别讲述了 HTTP Mirror Server 和 Debug PostProcessor 的脚本调试实例.此文主要讲述第三种调试工具:DebugSampler,其主要是查看JMeter ...

  3. async 和 await小结

    三大返回值: 返回类型 - Task<TResult> 返回类型 - Task 返回类型 - void 当你添加 async 关键字后,需要返回一个将用于后续操作的对象,请使用 Task& ...

  4. itertools模块

    itertools模块中有很多函数,返回的是一个迭代器 参考: http://www.wklken.me/posts/2013/08/20/python-extra-itertools.html#_1

  5. Windows Server 2008 R2安装子域控制器

    一.实验网络拓扑图: 二.实验说明: 子域控制器安装前需要先把主域控制器安装好,然后子域控制器的DNS先指向主域控制器的IP地址 192.168.10.30,主域控制器委派DNS给子域控制器后再把子域 ...

  6. (转载)(收藏)Awk学习详细文档

    awk命令 本文索引 [隐藏] awk命令格式和选项 awk模式和操作 模式 操作 awk脚本基本结构 awk的工作原理 awk内置变量(预定义变量) 将外部变量值传递给awk awk运算与判断 算术 ...

  7. layzr.js新版使用方法

    转载请注明出处:http://www.cnblogs.com/fiter/p/5413919.html 前言 今天研究这个JS库,本人新手,将官方的js代码下载下来后始终无法正常使用,经过多番尝试,终 ...

  8. mac 安装jdk1.5

    前期准备 Java安装包 JDK 1.5:Java for Mac OS X 10.5 Update 10(From: Apple) 辅助工具 Pacifist:用于提取*.dmg安装包中的文件(点我 ...

  9. 如何运用TurboDemo创建视频示例

    TurboDemo不仅可以速抓取屏幕截图,而且可高效制作出时尚美观的介绍.演示动画.软件模拟以及使用说明.下面的例子将会告诉使用者们如何分步创建一个视频示例,帮助使用者们快速的上手: 1.开启Turb ...

  10. dr.wondr博士随笔之三星某智能机的SGHXXXX 的取证恢复一例

    大家好!欢迎今天再次来到我dr.wonde的博客, 今天我给大家带来一款三星镜面古董机SGH-E848的取证展示! 三星SGH-E848是一款非常漂亮的镜面手机,2008年出厂.. 上面黄色是97号数 ...