jQuery实现为table表格动态添加或删除tr功能示例

2020-05-17 06:25:55易采站长站整理

{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){