本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考,具体如下:
HTML页面元素如下:
<!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDetailTab" border="1"> <tr> <td>订单合同号</td> <td colspan="4" id="orderId"></td> </tr> <tr> <td>捆包号</td> <td>品名</td> <td>规格</td> <td>材质</td> <td>重量</td> </tr> </table> </div>
业务需求是,从后台获取到订单合同下的明细信息,然后动态添加到上面的表格中,做法是:
1. 在jqgrid表格中为每一列添加一个“订单明细”的图标,如下所示:
jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; jQuery(grid_selector).jqGrid({ data: grid_data, datatype: "local", //从服务器端返回的数据类型 height: 400, //表格高度,可以是数字,像素值或者百分比 /****列显示名称******/ colNames:['id', '订单合同号', '收货单位', '提货方式', '物资来源', '物资来源厂商名称', '订单总重量', '绑定合同号来源', '绑定合同号', '订单状态', '订单明细'], /****常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序******/ colModel:[ {name:'id',index:'id', width:0, sorttype:"int", editable: true, hidden:true}, {name:'goodsOrder', index:'goodsOrder', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsReceiveCompany', index:'goodsReceiveCompany', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsDeliveryMode', index:'goodsDeliveryMode', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'originName', index:'originName', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'contractWeight', index:'contractWeight', width:60, sortable:false, editable:true, editoptions:{size:"20",maxlength:"30"}, formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"", decimalPlaces:3}}, {name:'purchaseContractOrigin', index:'purchaseContractOrigin', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}}, {name:'purchaseContractOriginVal', index:'purchaseContractOriginVal', width:60, sortable:false, editable: true, editoptions:{size:"20",maxlength:"30"}}, {name:'contractStatus', index:'contractStatus', width:60, editable:true, editoptions:{size:"20",maxlength:"30"}}, {name:'myac222', index:'', width:120, fixed:true, sortable:false, resize:false, align:'center', formatter: function (value, grid, rows, state) { return "<a href=\"#\" title=\"订单明细\" style=\"margin-left:10px\" onclick=\"contractDetail(" + rows.id + ")\"><i class=\"icon-bar-chart blue\" style=\"font-size:15px\"></i></a>"; } } ], loadonce: true, //一次加载全部数据到客户端,由客户端进行排序。 sortable: true, rownumbers: true, //添加左侧行号 viewrecords: true, //定义是否要显示总记录数 rowNum: 10, //在grid上显示记录条数,这个参数是要被传递到后台 rowList: [10,20,30], //一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台 pager: pager_selector, //定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 altRows: true, //设置为交替行表格,默认为false //toppager: true, multiselect: true, //定义是否可以多选 //multikey: "ctrlKey", //只有在multiselect设置为ture时起作用,定义使用那个key来做多选。shiftKey,altKey,ctrlKey multiboxonly: true, //只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用 gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接 }, loadComplete : function() { $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' }); var table = this; setTimeout(function(){ updatePagerIcons(table); enableTooltips(table); }, 0); }, editurl: "", //定义对form编辑时的url caption: "销售订单列表", //表格名称 autowidth: true //如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth });
上面添加“订单明细”的图标时,为其绑定了onclick事件,此事件将传递每一行的id给绑定函数。
2. 在绑定函数中首先获取onclick传递过来的行id,通过此行id可访问该行的每个字段的数据。然后在此绑定函数中通过ajax从后台获取到“订单明细”的具体数据,再通过append方法将获取到的数据动态添加到table表格中。最后,将此table表格所在的div以dialog的形式弹出来展示给用户。如下:
/*********合同明细弹出框************/ function contractDetail(id){ $("#contractDetailTab tr:gt(0)").empty(); var rowData = $("#grid-table").jqGrid('getRowData',id); var purchaseContractOrder = rowData.purchaseContractOriginVal; $("#orderId").html(rowData.goodsOrder); //请求合同明细数据 $.ajax({ async:false, cache:true, type: "GET", url: "goods_findPagePurchaseOrderDetail.do"+purchaseContractOrder, //获取json数据 success: function(result){ var result = eval('('+ result +')'); if(result.root != undefined && result.root.length > 0){ var resultContent = result.root; for (var i = 0; i < resultContent.length; i++) { $("#contractDetailTab").append("<tr><td>捆包号</td><td>品名</td><td>规格</td><td>材质</td><td>重量</td></tr><tr><td>"+resultContent[0][0]+"</td><td>"+resultContent[0][1]+"</td><td>"+resultContent[0][2]+"</td><td>"+resultContent[0][3]+"</td><td>"+resultContent[0][5]+"</td></tr>"); } $("#contractDetailDiv").dialog({ autoOpen:true, height:300, width:450, resizable:false, modal:true, }); } else { alert("该订单合同下无明细信息!"); } }, error: function() { alert("获取合同明细失败") } }); }
这里需要注意的是,每次动态添加新的明细之前,需要将上一次的明细信息清空,即使用empty方法将上一次动态添加的tr先删除掉,然后再动态添加新的明细信息。
动态删除除第一行以外的其他tr:
$("#contractDetailTab tr:gt(0)").empty(); $("#contractDetailTab tr").not(':eq(0)').empty();
动态添加tr:
复制代码 代码如下:$("#contractDetailTab").append("<tr><td>捆包号</td><td>品名</td><td>规格</td><td>材质</td><td>重量</td></tr><tr><td>"+resultContent[0][0]+"</td><td>"+resultContent[0][1]+"</td><td>"+resultContent[0][2]+"</td><td>"+resultContent[0][3]+"</td><td>"+resultContent[0][5]+"</td></tr>");
动态删除除第一行和最后一行以外的其他tr:
$("#contractDetailTab tr:not(:first):not(:last)").remove();
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]