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 ...
随机推荐
- 真TM操蛋——观《鬼子来了》有感
杀日本人有罪?日本人杀中国人为何无罪?战俘?双手沾满鲜血,仇人,为何杀仇人还要被自己人判刑,被仇人斩首? 看了最后结局,我心里只有这两句话,同学说结局不好,我觉得结局恰恰很好,姜文是个很好的导演,他布 ...
- .NET编译项目时出现《此实现不是 Windows 平台 FIPS 验证的加密算法的一部分》处理方法
有用户提出在编译代码时出现源文件“D:\.......ervice.cs”未能打开(“此实现不是 Windows 平台 FIPS 验证的加密算法的一部分.”)的问题,如下图所示: 对于上面的问题,只需 ...
- MySQL数据库中tinyint类型字段读取数据为true和false
今天遇到这么一个问题,公司最近在做一个活动,然后数据库需要建表,其中有个字段是关于奖励发放的状态的字段,结果读取出来的值为true 一.解决读取数据为true/false的问题 场景: 字段:stat ...
- Leetcode: Circular Array Loop
You are given an array of positive and negative integers. If a number n at an index is positive, the ...
- JavaScript在A页面判断B页面加载完毕（iframe load）
今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...
- React 基础入门，基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- WIN10 多用户登录
WIN10 多用户登录 参考下面链接 http://www.mysysadmintips.com/windows/clients/545-multiple-rdp-remote-desktop-ses ...
- LeetCode: Linked List Random Node
这题参照http://blog.jobbole.com/42550/ 用的蓄水池算法,即更改ans的概率为1/(当前length) /** * Definition for singly-linked ...
- gen目录无法更新，或者gen目录下的R.JAVA文件无法生成
gen目录无法更新,或者gen目录下的R.JAVA文件无法生成 1.gen目录的用处 android gen目录下的R.java并不是由用户创建,而是android工程本身将android的资源进行自 ...
- iBatis框架batch处理优化 (转)
为什么要做batch处理 这个问题我就不解释了,因为我想你们肯定能比我解释的更好!如果你真的不知道,那就到Google上去搜索一下吧☻Oracle回滚段 这个问题偶也不很明白,只是 ...