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 ...

随机推荐

java 性能优化：35 个小细节，让你提升 java 代码的运行效率
前言代码优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...
Python基础、异常处理
一.概述错误与异常概念异常也是对象, 基于Exception类.内置异常异常处理.流程 try/except/else 处理python或你触发的异常 try/fianlly 不管有没有异 ...
javascript sandbox
用途 https://github.com/gf3/sandbox Can be used to execute untrusted code. Support for timeouts (e.g. ...
neXtep 安装过程整理
1 授权root用户远程登录 2 文件下载 http://www.nextep-softwares.com/ 选择DOWNLOAD NOW 选择你需要的版本我选择的版本是 neXtep.1.0.7 ...
CentOS7下Apache及Tomcat开启SSL
安装: 复制代码 yum install -y openssl #使用openssl可手动创建证书 yum install -y httpd yum install -y mod_ssl 防火墙打开8 ...
ASCII码表（二进制十进制十六进制）
css里,允许使用转义字符\+ascii16进制形式; 例如: e的ascii 16进制是65,我们就写为\65 expression -> expr\65ssion 二进制十进制十六进制 ...
HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
php 设计模式
一.工厂模式 1.创建接口类,规范方法,要实现这个接口的类必须实现这个接口的所有方法,接口的方法默认是抽象的,所以不再方法前面加 abstract interface people{ public f ...
Linux字符界面安装VMware tools
以往用VMware虚拟机都是装的桌面版,无奈实验室电脑属于老爷机,跑桌面linux实在有点吃不消,只能装个Basic Server玩玩了... 在桌面环境下装VMwaretools很简单,直接点击VM ...
WebIM 聊天 Demo
最近 2 个月用业余时间写了一个 IM ,动手之前想了很多,包括前期设计.语言.数据库等,经过了一番思想斗争,最终前台用 Vue.js 展示,Server 使用 node ,数据库使用 MongoDB ...

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

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

随机推荐

热门专题

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

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