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. Java提高篇——单例模式

    介绍 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...

  2. NSArray

    版权声明:本文为博主原创文章,未经博主允许不得转载. 数组是一个元素有序.元素可重复的集合,在iOS编程中经常被用到,而Foundation框架提供了数组对象.数组对象包括不可修改的数组对象NSArr ...

  3. MySQL的下载与安装 和 navicat for mysql 安装使用

    新手上路-MySQL安装 目录结构 Windows平台 MySQL安装 示例数据导入 Linux平台 CentOS系统 Ubuntu系统 FAQ 密码生成工具-keepass 修改提示符 图形工具 删 ...

  4. appframework3.0（JQmobi）入门教程

    2015-03-31 22:02 2011人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. appframework3.0好像是3月24日发布的,今天31号,发现和 ...

  5. jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz

    jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个 ...

  6. 关于g++编译模板类的问题

    今天搞了我接近4个小时,代码没错,就是调试没有通过,无论怎么也没有想到是编译器的问题 g++不支持c++模板类 声明与实现分离,都要写到.h文件里面. 以后记住了.

  7. 18.有一个网页地址, 比如PHP开发资源网主页: http://www.phpres.com/index.html,如何得到它的内容?

    方法1(对于PHP5及更高版本): $readcontents = fopen("http://www.phpres.com/index.html", "rb" ...

  8. Android--自定义加载框

    1,在网上看了下好看的加载框,看了一下,挺好看的,再看了下源码,就是纯paint画出来的,再加上属性动画就搞定了 再来看一下我们的源码 LvGhost.java package com.qianmo. ...

  9. 使用Redux管理你的React应用(转载)

    本文转载自: http://www.cnblogs.com/matthewsun/p/4773646.html

  10. Java多线程学习（二）

    一.定义产生返回值的任务 在上一篇文的介绍中,我们知道了定义任务通常的方法是定义一个实现Runnable接口的类,这个类被我们成为任务.然而也很容易注意到,任务的最重要的一个方法就是run( )方法, ...