JSP页面Table的数据拼接
2024-06-05 08:26:48
系统业务需要
表格table的数据，根据用户的选择来加载的
append()方法
拼接元素
function selectAssayItem(el, id) {var sampBizModeId = $(el).closest("tr").find("td[columnname='sampBizModeId']").text();var testObjectId = $(el).closest("tr").find("td[columnname='testObjectId']").text();if (!sampBizModeId) {$.app.alert({title: "警告",message: "请先选择检测对象!"});return;}var url = ctx + "/biz/assay/assay-order/select-assay-item?sampleId=" + id + "&testObjectId=" + testObjectId + "&sampBizModeId=" + sampBizModeId;$.app.modalDialog("选择检测项目", url, {width: 980, height: 650,ok: function (modal) {if ($('#table-fxxmmx').find("tbody tr").length == 0) {$.app.alert({title: "提示",message: "请选择需要检测的项目"});return;}//获取form的所有字段和值var selectItemTableData = getTableContent($('#table-fxxmmx'));//获取化验项目var assayItemNames = "";var assayItems = JSON.parse(selectItemTableData);$.each(assayItems, function (j, item) {if (assayItemNames == "") {assayItemNames += item['assayItemName'];} else {assayItemNames += "," + item['assayItemName'];}});var money = $('#shoufeijine').val();//获取选择的组合项目idsvar selectItemCateIds = "";var checkbox = $.table.getAllSelectedCheckbox($("#table-zhxm"));if (checkbox.length) {var arr = checkbox.serializeArray();$.each(arr, function (i, item) {if (selectItemCateIds == "") {selectItemCateIds += item.value;} else {selectItemCateIds += "," + item.value;}});}//把选择的数据写入表格中$(el).parent().parent().find('td').each(function (i, td) {if ($(td).attr('columnname')) {if ($(td).attr('columnname') == 'selectItemTableData') {//化验项目table数据$(td).html('');$(td).append(selectItemTableData);} else if ($(td).attr('columnname') == 'totalCost') {$(td).html('');$(td).append(money);} else if ($(td).attr('columnname') == 'assayItemNames') {//化验项目中文名称$(td).html('');$(td).append(assayItemNames);} else if ($(td).attr('columnname') == 'selectItemCateIds') {//选择的化验项目分组$(td).html('');$(td).append(selectItemCateIds);}}});$.app.cancelModelDialog();// $.table.initCheckbox($('#sampleTable'));//选择完化验项目之后需要重新遍历表格的化验费用 写入委托单的表单中var assayCostCount = 0;$('#sampleTable').find("tbody tr").each(function (i, item) {$.each(item.childNodes, function (j, item) {var columnName = $(item).attr("columnName");if (columnName == "totalCost") {var value = item.innerHTML;if (value) {assayCostCount += parseFloat(value);}}});});$("#assayCostCount").val(assayCostCount);$("#sampRegAmount").val($('#sampleTable').find("tbody tr").length);//样品数量},showAfter: function () { //回写已经选择的化验项目信息var selectItemTableData = "";var money = "";var selectItemCateIds = "";//把选择的数据写入表格中$(el).parent().parent().find('td').each(function (i, td) {if ($(td).attr('columnname')) {if ($(td).attr('columnname') == 'selectItemTableData') {//化验项目table数据selectItemTableData = $(td).html();} else if ($(td).attr('columnname') == 'totalCost') {money = $(td).html();} else if ($(td).attr('columnname') == 'selectItemCateIds') {selectItemCateIds = $(td).html();}}});if (selectItemTableData != "") {$("#shoufeijine").val(money);var jcxmTrs = $("#table-jcxm").find("tbody tr");var jsonData = JSON.parse(selectItemTableData);//遍历单项表格 然后把包括在分组中的化验项目勾上jcxmTrs.each(function (i, tr) {var itemId = $(tr).find("td[columnname='id']").html();for (var i = 0, len = jsonData.length; i < len; i++) {if (itemId == jsonData[i].assayBizItemId) {var cb = $(tr).find(":checkbox");cb.prop("checked", true);}}});//添加已经选择的化验项目$("#table-fxxmmx tbody").html('');$.each(jsonData, function (j, item) {var checked = "";if (item.reportable == 1) {checked = 'checked="checked"';} else {checked = '';}var tr = $('<tr></tr>');var td0 = '<td columnName="reportable" class="check"><input name="ids" type="checkbox" ' + checked + ' ></td>';var td1 = $('<td columnName="assayItemName" ></td>').append(item.assayItemName);var dataValue ="";var dataName = "";if (item.assayStandard) {dataValue = item.assayStandard;dataName = item.assayStandardName;}var td2 = $('<td columnName="assayStandard" data-dataId="'+item.assayItemNo+'"></td>').append('<a href="#" data-dataId="'+item.assayItemNo+'" data-value="'+dataValue+'" >' + dataName + '</a>'); /*检测标准*/var td3 = $('<td columnName="settSum"></td>').append(item.settSum != null ? item.settSum : item.assayItemCost);var td4 = $('<td columnName="assayBizItemId" style="display: none"></td>').append(item.assayBizItemId);var td5 = $('<td columnName="bizItemId" style="display: none"></td>').append(item.assayItemNo);var a = $('<a href="#" onclick="del(this);"><i class="icon-trash"></i> </a>');var td6 = $('<td style="text-align: center"></td>').append(a);tr.append(td0).append(td1).append(td2).append(td3).append(td4).append(td5);//.append(td6);// 添加保存的样品信息到表格$("#table-fxxmmx tbody").append(tr);if (item.assayBizItemCharge) {money += item.assayBizItemCharge;}});$.table.initCheckbox($('#table-fxxmmx'));}if (selectItemCateIds != "") {var zhxmTrs = $("#table-zhxm").find("tbody tr");// 遍历单项表格 然后把包括在分组中的化验项目勾上zhxmTrs.each(function (i, tr) {var itemId = $(tr).find("td[columnname='id']").html();if (selectItemCateIds.indexOf(itemId) != -1) {var cb = $(tr).find(":checkbox");cb.prop("checked", true);}});}}});
}JSP页面Table的数据拼接相关推荐
- JSP页面Table的数据绑定
常规绑定方式 Controller @Controller @RequestMapping(value = "/biz/plan/daily-plan") public class ...
- JSP页面分页显示数据
一.源代码(这里以一个Java web的留言板项目为例): 1.Dao层操作数据库的方法(MessageDao.java) 设置每页显示的最大留言条数: private final int MAX_S ...
- jsp页面table表头固定-freezeheader
该插件兼容firefox,charome,safari,ie10以上的版本. 1.导入jquery与freezeheader的包: 2.页面中的table: 3.通过ajax请求后台返回数据拼接tab ...
- jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
- jsp获取java后台数据_springMVC笔记：jsp页面获取后台数据记录列表
1.读取数据库中的记录List> attributes; 2.Controller构造Model如下: @RequestMapping("display.do") publi ...
- 关于jsp web项目，jsp页面与servlet数据不同步的解决办法（报错404、405等）即访问.jsp和访问web.xml中注册的/servlet/的区别
报错信息: Type Status Report Message HTTP method GET is not supported by this URL Description The method ...
- springMVC:将controller中Model数据传递到jsp页面
在action中存放数据,代码如下: @Controller // 加入到IOC容器 //@RequestMapping(value="/topic") public class ...
- JAVA里的jsp网页背景_【JavaWeb】JSP 页面
JSP 页面 简介 JSP(Java Server Pages),即 Java 的服务器页面.它的主要作用是代替 Servlet 程序回传 HTML 页面的数据,因为 Servlet 程序回传 HTM ...
- 如何在jsp页面中连接mysql数据库_如何使用JSP访问MySQL数据库
如何使用JSP访问MySQL数据库 更新时间:2006年10月13日 00:00:00 作者: import ="java.util.*" import ="java ...
最新文章
- Case study：数据库网页构建原理和实践
- AI芯片是如何研制的？未来的发展之路又在何处？
- 解决无法安装cnpm，cnpm卡顿问题
- 使用JavaScript在下拉列表中获取选定的值
- git使用,Git的skil-map
- Chromium浏览器之渲染引擎Blink
- python之time模块和hashlib模块
- 数据库面试题【六、Sql的优化】
- 全程图解交换机和路由器的应用
- 【干货】分享总结：MySQL数据一致性
- python的数据库中间件_数据库中间件设计方案
- 从每年的编程语言排行来看，为什么C/C++能稳居前五？
- 熊猫直播宣布正式关站 至今已运行1286天
- 您知道数据中心的最佳温度是多少吗？
- Batch size对训练效果的影响
- 《Go语言实战》William Kennedy中文版学习笔记
- xcod8 subviews 变成 1000x1000
- android studio找不到app moudle和project moudle
- unicode转中文
- 华为手机总是弹出风险提示