物流信息系统中应用jQuery实现表格数据的动态添加与统计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
民邮电出版社,2009. [3] 吴超,张帅. 巧用 JQuery. 人民邮电出版社,2009.
- 54 -
簿共享之前设置完成。工作簿标题栏中的文件名后多出“共 享”两字,才表示共享工作簿设置成功。
(2) 在实验室内相关老师的相应电脑的桌面上建立指向” 大学物理实验成绩管理“共享文件夹的快捷方式。在首次打开 的时候保存共享密码。
(3) 只给输入数据的老师提供修改密码。特别要提醒的 是,Excel 不会显示用户尚未保存的更改,要提醒教师输完成 绩后及时保存。
(2) 统计更新总金额 function UpdateTotal()// 更新总金额
{ var vTotalMoney=0;// 总金额的初始值为 0; var vTable=¥("#tbin");// 得到表格的 jquery 对象 var vTotal= vTable.find("#txtTotal") ;// 得到总金额对象 var vtxtAfters=vTable.find("#txtMoney");
DATABASE AND INFORMATION MANAGEMENT
数据库与信息管理
物流信息系统中应用 jQuery 实现表格数据的动态添加与统计
王方智
(湖南科技职院软件学院,长沙 410014)
摘 要: 物流信息系统中应用 jQuery 实现表格数据的动态添加与统计。 关键词: 物流信息系统;jQuery;动态表格
var v=¥("#tbin");// 得到表格的 jquery 对象 // 所有的数据行有一个.MyRow 的 Class,得到数据行的大小 var vcount=¥("#tbin tr").filter(".MyRow").size()+1; // 表格有多少个数据行 var vTr= ¥ ("#tbin #trDataRow1"); // 得 到 表 格 中 的 第 一 行 数 据 var vTrClone=vTr.clone(true);// 创建第一行的副本对象 vTrClone vTrClone.appendTo(v);// 把副本单元格对象添加到表格下方
作者简介:王方智 (1977-),男,讲师,研究方向:软件架
构与程序设计。
收稿日期: 2010-09-15
- 49 -
电脑编程技巧与维护
将整个工作表设置保护,方法是:先选中工作表的左上角 区域,全选工作表,再选择“工具”菜单里的“保护 - 保护 工作表”,在弹出来的“保护工作表”对话框里,然后按照提 示在该对话框“取消工作表保护时使用的密码”下边的文本框 内输入设定的密码,同时选择列表框里的内容,允许此工作表 的所有用户进行“选定锁定单元格”“选定未锁定的单元格” “自动筛选”等操作,单击“确定”按钮即可。这样在用户打 开该 Excel 文件时,就可以使用自动筛选功能,选择需要的班 级,然后输入学生成绩。 4.2 共享工作簿
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find ("#txtMoney"); // 得到费用;
var vMoney=CalculatorMoney(vVal,vtxtAfter.val()); // 使用公式计算单行运费
vtxtMoney.val(vMoney); // 显示单行运费信息 UpdateTotal(); // 调用函数统计更新总费用
(4) 对管理文件及时进行备份。最好备份到实验室其他 电脑,以保证此重要数据的安全性。
6 结语
Excel 共享工作簿功能的使用,使实验室教师从繁重的数 据统计中脱身出来, 提高了管理的效率,节约了成本。教师及 学生可以查看实验成绩的最新情况,可以检查当前谁正在编辑 共享工作簿, 并使用自动更新来保持更改监视。管理者甚至可 以利用共享工作簿向实验室任课老师发出指令,也能通过其向 同事传递信息, 可多人同时编辑而不引起冲突。成绩管理系统 如果用高级程序语言进行编程来实现,需要编程者懂得较多的 软件知识,并且需要专设服务器,成本较高。而文中提出的方 法简单易行,成本低廉,具有一定的推广价值。
Abstract: Use jQuery To Add Dynamic Table And Calculate Statistical Data In Logistics System. Key words: Logistics System; jQuery; Dynamic Table
1 引言
jQuery 由美国人 John Resig 创建,jQuery 是一个优秀的 Javascrīpt 框架。它兼容 CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+,Opera 9.0+)。jQuery 是一个快速的,简洁 的 JavaScript 库 , 使 用 户 能 更 方 便 地 处 理 HTML documents、 events,实现动画效果,并且方便地为网站提供 Ajax 交互。在 微软的最新开发工具 VS2010 网站项目中自动添加了 jQuery 的 引用,提出使用 jQuery 解决物流信息系统中的复杂动态效果 和数据统计问题。
2 要求
物流信息系统中的功能要求如图 1 所示,表格中每一行 代表一笔运送货物的信息,在录入每行的计费重量和费率后, 要求能自动计算运送费用,并且能自动统计所有运送货物的 总运费。运送货物信息的数据量 (即表格的行数) 不定,要 求能动态增加、删除,即表格的数据行数是动态可维护的。
图1
3 实现思想
单行货物信息计算运费不难实现,只需要在计费重量和 费率的文本框对象的 onblur 事件中,得到费率和计费重量, 按照公式计算好运费即可。
为了使 Excel 文档能够被多人同时打开并编辑,需要设置 共享工作簿。选择“工具”菜单里的“共享工作簿”,在弹出 来的对话框里做相应的设置,选择允许多用户编辑,单击确 定。经设置后,Excel 文件界面如图 1 所示。
图 1 2009-2010-2 大学物理实验成绩统计工作表
5 其他注意事项
(1) 对工作簿的结构和窗口实施保护。对工作表固定内容 或公式也实施保护,只对修改区域解除锁定,并设置取消保护 密码,提防无意或恶意修改。保护工作簿或工作表必须在工作
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
(上接第 49 页)
function(i) { var vTempValue=¥(this).val();
if(vTempValue=="") {
vTempValue=0; } vTotalMoney=vTotalMoney+parseFloat(vTempValue); // 计算总费用 } )// 遍历结束 vTotal.val(vTotalMoney); // 将总费用显示到对应文本框对象中 } (3) 计费重量变化时计算费用,并统计总费用
总计费用的统计也不难实现,遍历整个表格的所有费用 对象,统计其和,将计算结果放到总计的文本框对象即可。
难点在动态添加整行表格数据,而且每行数据上的各文 本框对象的事件也要实现自动统计和运算,有相当的难度。 如果使用 JavaScript 需要调用 Dom 对象创建一个 <tr> 单元格, 还需要在 tr 里面添加 10 多个单元格 <td> 对象,每个单元格 <td> 对象内要添加文本框对象,还需要在文本框对象上响应
¥("#txtMoneyWeight").bind("change", function() { var vTotalMoney=0;// 总金额的初始值为 0; var vtxtDetail=¥(this);// 得到变化的文本框对象 var vVal=vtxtDetail.val();
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate"); // 得到费率;
Use jQuery to Add Dynamic Table and Calculate Statistical Data in Logistics System
WANG Fangzhi
(Software Institute pf Hunan Vocational College of Science And Technology,Changsha 410014)
onblur 事件进行运费计算,代码量相当大。
使用 jQuery 可以大大减轻工作量,在实际开发中,使用
了 jQuery 的 clone(true)函数,该函数可以创建一个 jQury 对象
的副本,并且参数为 true 时,可以复制该元素的所有事件处
理函数。
可以在第一行中实现计算运费的运算。然后点增加明细
参考文献
[1] 金爱兰. Excel 在医院信息系统统计信息处理中的应用[J]. 医学信息,2004,17(7):395-402.
[2] 曾达颖. 利用 Excel 管理实验室档案[J]. 信息技术与应用, 2004,2:43-44.
[3] 张善伟. 利用 Excel 共享工作簿功能提高预算编制效率. 2006,4:25-26.
}); // 变化脚本结束
5 结语
利用 jQuery 可以开发出具有优秀用户体验的 Web 应用, 使更多的用户可以借助 Web 应用高效地处理日常事务。以上 程序在 Windows XP 下,使用 IE6.1 浏览器测试通过。
参考文献
[1] 季国飞. jQuery 开发技术详解. 电子工业出版社,2010. [2] (美)比伯奥特,(美)卡茨,陈宁,等,译. jQuery 实战. 人
按钮时,调用 jQuery 的 clone(true)函数,建立第一行的副本对
象插入到表格下方,由于使用 clone(true)可以复制对象的事件
处理函数,所以每行中文本框的 onblur 事件和运费计算函数
也被成功复制,不需再做处理,大大减轻了工作量。
4Leabharlann Baidu关键代码
(1) 创建克隆单元格对象并添加到表格中
// 得到所有计算好的费用对象; vtxtAfters.each(
// 使用 jQuery 的 each 函数遍历每行费用对象,累加成总金额
(下转第 54 页) —— — ——— —— —— ———— —— —— —— —— —— ———— —— —— ———— —— —— ———— —— ———— —— —
- 54 -
簿共享之前设置完成。工作簿标题栏中的文件名后多出“共 享”两字,才表示共享工作簿设置成功。
(2) 在实验室内相关老师的相应电脑的桌面上建立指向” 大学物理实验成绩管理“共享文件夹的快捷方式。在首次打开 的时候保存共享密码。
(3) 只给输入数据的老师提供修改密码。特别要提醒的 是,Excel 不会显示用户尚未保存的更改,要提醒教师输完成 绩后及时保存。
(2) 统计更新总金额 function UpdateTotal()// 更新总金额
{ var vTotalMoney=0;// 总金额的初始值为 0; var vTable=¥("#tbin");// 得到表格的 jquery 对象 var vTotal= vTable.find("#txtTotal") ;// 得到总金额对象 var vtxtAfters=vTable.find("#txtMoney");
DATABASE AND INFORMATION MANAGEMENT
数据库与信息管理
物流信息系统中应用 jQuery 实现表格数据的动态添加与统计
王方智
(湖南科技职院软件学院,长沙 410014)
摘 要: 物流信息系统中应用 jQuery 实现表格数据的动态添加与统计。 关键词: 物流信息系统;jQuery;动态表格
var v=¥("#tbin");// 得到表格的 jquery 对象 // 所有的数据行有一个.MyRow 的 Class,得到数据行的大小 var vcount=¥("#tbin tr").filter(".MyRow").size()+1; // 表格有多少个数据行 var vTr= ¥ ("#tbin #trDataRow1"); // 得 到 表 格 中 的 第 一 行 数 据 var vTrClone=vTr.clone(true);// 创建第一行的副本对象 vTrClone vTrClone.appendTo(v);// 把副本单元格对象添加到表格下方
作者简介:王方智 (1977-),男,讲师,研究方向:软件架
构与程序设计。
收稿日期: 2010-09-15
- 49 -
电脑编程技巧与维护
将整个工作表设置保护,方法是:先选中工作表的左上角 区域,全选工作表,再选择“工具”菜单里的“保护 - 保护 工作表”,在弹出来的“保护工作表”对话框里,然后按照提 示在该对话框“取消工作表保护时使用的密码”下边的文本框 内输入设定的密码,同时选择列表框里的内容,允许此工作表 的所有用户进行“选定锁定单元格”“选定未锁定的单元格” “自动筛选”等操作,单击“确定”按钮即可。这样在用户打 开该 Excel 文件时,就可以使用自动筛选功能,选择需要的班 级,然后输入学生成绩。 4.2 共享工作簿
var vtxtMoney=vtxtDetail.parent("td").parent("tr").find ("#txtMoney"); // 得到费用;
var vMoney=CalculatorMoney(vVal,vtxtAfter.val()); // 使用公式计算单行运费
vtxtMoney.val(vMoney); // 显示单行运费信息 UpdateTotal(); // 调用函数统计更新总费用
(4) 对管理文件及时进行备份。最好备份到实验室其他 电脑,以保证此重要数据的安全性。
6 结语
Excel 共享工作簿功能的使用,使实验室教师从繁重的数 据统计中脱身出来, 提高了管理的效率,节约了成本。教师及 学生可以查看实验成绩的最新情况,可以检查当前谁正在编辑 共享工作簿, 并使用自动更新来保持更改监视。管理者甚至可 以利用共享工作簿向实验室任课老师发出指令,也能通过其向 同事传递信息, 可多人同时编辑而不引起冲突。成绩管理系统 如果用高级程序语言进行编程来实现,需要编程者懂得较多的 软件知识,并且需要专设服务器,成本较高。而文中提出的方 法简单易行,成本低廉,具有一定的推广价值。
Abstract: Use jQuery To Add Dynamic Table And Calculate Statistical Data In Logistics System. Key words: Logistics System; jQuery; Dynamic Table
1 引言
jQuery 由美国人 John Resig 创建,jQuery 是一个优秀的 Javascrīpt 框架。它兼容 CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+,Opera 9.0+)。jQuery 是一个快速的,简洁 的 JavaScript 库 , 使 用 户 能 更 方 便 地 处 理 HTML documents、 events,实现动画效果,并且方便地为网站提供 Ajax 交互。在 微软的最新开发工具 VS2010 网站项目中自动添加了 jQuery 的 引用,提出使用 jQuery 解决物流信息系统中的复杂动态效果 和数据统计问题。
2 要求
物流信息系统中的功能要求如图 1 所示,表格中每一行 代表一笔运送货物的信息,在录入每行的计费重量和费率后, 要求能自动计算运送费用,并且能自动统计所有运送货物的 总运费。运送货物信息的数据量 (即表格的行数) 不定,要 求能动态增加、删除,即表格的数据行数是动态可维护的。
图1
3 实现思想
单行货物信息计算运费不难实现,只需要在计费重量和 费率的文本框对象的 onblur 事件中,得到费率和计费重量, 按照公式计算好运费即可。
为了使 Excel 文档能够被多人同时打开并编辑,需要设置 共享工作簿。选择“工具”菜单里的“共享工作簿”,在弹出 来的对话框里做相应的设置,选择允许多用户编辑,单击确 定。经设置后,Excel 文件界面如图 1 所示。
图 1 2009-2010-2 大学物理实验成绩统计工作表
5 其他注意事项
(1) 对工作簿的结构和窗口实施保护。对工作表固定内容 或公式也实施保护,只对修改区域解除锁定,并设置取消保护 密码,提防无意或恶意修改。保护工作簿或工作表必须在工作
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
(上接第 49 页)
function(i) { var vTempValue=¥(this).val();
if(vTempValue=="") {
vTempValue=0; } vTotalMoney=vTotalMoney+parseFloat(vTempValue); // 计算总费用 } )// 遍历结束 vTotal.val(vTotalMoney); // 将总费用显示到对应文本框对象中 } (3) 计费重量变化时计算费用,并统计总费用
总计费用的统计也不难实现,遍历整个表格的所有费用 对象,统计其和,将计算结果放到总计的文本框对象即可。
难点在动态添加整行表格数据,而且每行数据上的各文 本框对象的事件也要实现自动统计和运算,有相当的难度。 如果使用 JavaScript 需要调用 Dom 对象创建一个 <tr> 单元格, 还需要在 tr 里面添加 10 多个单元格 <td> 对象,每个单元格 <td> 对象内要添加文本框对象,还需要在文本框对象上响应
¥("#txtMoneyWeight").bind("change", function() { var vTotalMoney=0;// 总金额的初始值为 0; var vtxtDetail=¥(this);// 得到变化的文本框对象 var vVal=vtxtDetail.val();
var vtxtAfter=vtxtDetail.parent("td").parent("tr").find("#txtRate"); // 得到费率;
Use jQuery to Add Dynamic Table and Calculate Statistical Data in Logistics System
WANG Fangzhi
(Software Institute pf Hunan Vocational College of Science And Technology,Changsha 410014)
onblur 事件进行运费计算,代码量相当大。
使用 jQuery 可以大大减轻工作量,在实际开发中,使用
了 jQuery 的 clone(true)函数,该函数可以创建一个 jQury 对象
的副本,并且参数为 true 时,可以复制该元素的所有事件处
理函数。
可以在第一行中实现计算运费的运算。然后点增加明细
参考文献
[1] 金爱兰. Excel 在医院信息系统统计信息处理中的应用[J]. 医学信息,2004,17(7):395-402.
[2] 曾达颖. 利用 Excel 管理实验室档案[J]. 信息技术与应用, 2004,2:43-44.
[3] 张善伟. 利用 Excel 共享工作簿功能提高预算编制效率. 2006,4:25-26.
}); // 变化脚本结束
5 结语
利用 jQuery 可以开发出具有优秀用户体验的 Web 应用, 使更多的用户可以借助 Web 应用高效地处理日常事务。以上 程序在 Windows XP 下,使用 IE6.1 浏览器测试通过。
参考文献
[1] 季国飞. jQuery 开发技术详解. 电子工业出版社,2010. [2] (美)比伯奥特,(美)卡茨,陈宁,等,译. jQuery 实战. 人
按钮时,调用 jQuery 的 clone(true)函数,建立第一行的副本对
象插入到表格下方,由于使用 clone(true)可以复制对象的事件
处理函数,所以每行中文本框的 onblur 事件和运费计算函数
也被成功复制,不需再做处理,大大减轻了工作量。
4Leabharlann Baidu关键代码
(1) 创建克隆单元格对象并添加到表格中
// 得到所有计算好的费用对象; vtxtAfters.each(
// 使用 jQuery 的 each 函数遍历每行费用对象,累加成总金额
(下转第 54 页) —— — ——— —— —— ———— —— —— —— —— —— ———— —— —— ———— —— —— ———— —— ———— —— —