1. DataTable-columnsDefs通过动态生成的元素以及值获取
页面只有table-th,td以及td的属性都是动态创建,td第一列是动态生成的复选框
var ListTable = loadDataTable({
...
columnDefs: [{
orderable: false,
className: 'select-checkbox topClass',
targets: 0
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
param: function (param) {
....
},
columns: [
...
],
drawCallback:function(settings){
// 复选框居中
$("#ListTable tr:gt(0)").each(function (i, n) {//该方法可以获取每个复选框的点击事件
$(n).find("td").click().click();
})
}
});
想获取动态创建的checkbox根据它的选中状态判断来采取相应的前后台动作。
//后面添加的代码
$("#ListTable tr:gt(0)").each(function (i, n) {
//该方法可以获取每个复选框的点击事件
$(n).find("td").click().click();
}
2.下方代码举例使用:
var productStorageDynOutListTable = loadDataTable({
tableId: "productStorageDynOutListTable",
url: "/productStorage/productStorageDynOutData",
columnDefs: [{
orderable: false,
className: 'select-checkbox topClass',
targets: 0
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
param: function (param) {
param.wareHouseId = $("#productStorageDynOutSearch_wareHouseId").val();
param.dynType = $("#productStorageDynOutSearch_dynType").val();
param.searchParam = $("#productStorageDynOutSearch_searchParam").val();
param.createTimeBegin = $("#productStorageDynOutSearch_createTimeBegin").val();
param.createTimeEnd = $("#productStorageDynOutSearch_createTimeEnd").val();
param.dynStatus = $("#productStorageDynOutSearch_dynStatus").val();
},
columns: [
{data: "productStorageId", width: "5%",render: function (data, type, row){
return "";
}},
{data: "storageDynId", width: "10%", render : function (data, type, row) {
return '<a href="javascript:;" onclick="viewDetail(\''+data+'\', \''+row.dynStatus+'\', \''+row.createUser+'\')">'+data+'</a>';
}},
{data: "orderId", defaultContent: "-", width: "10%"},
{data: "dynType", defaultContent: "-", width: "10%", render : function(data){
return '';
}
},
{data: "dynStatus", defaultContent: "-", width: "10%", render : function(data){
return '';
}
},
{data: "wareHouseName", defaultContent: "-", width: "10%"},
{data: "createUser", width: "10%"},
{data: "createTime", width: "10%", render : function(data){
return '';
}
},
{data: "storageDynId", width: "15%", orderable: false, render: function(data, type, row){
var html = '';
// 待出库才能取消
if(row.dynStatus == "2"){
html += '<a class="ml20" href="javascript:;" onclick="storageDynCancel(\''+data+'\')">取消</a>';
}
// 4:已生成发货单
if (row.dynStatus == '3' && row.dynType == '0'){
html += '<a class="ml20" href="javascript:;" onclick="storageDynCreateDelivery(\''+data+'\', \''+row.orderId+'\')">生成发货单</a>';
}
return html;
}
}
],
drawCallback:function(settings){
productStorageDynOutListTable.on('deselect', function (e, dt, type, indexes ) {
if ($('#checkAllProductStorageDynOutListTable').hasClass('selected')) {
$('#checkAllProductStorageDynOutListTable').removeClass('selected');
}
});
// 全选复选框重置
$('#checkAllProductStorageDynOutListTable').removeClass('selected');
$('#checkAllProductStorageDynOutListTable').removeAttr("checked");
//#productStorageDynOutListTable是 <table id="productStorageDynOutDetailListTable">
$("#productStorageDynOutListTable tr:gt(0)").each(function (i, n) {
$(n).find("td").click(function(){});
});
}
});
本文当前仅作为平时遇到的问题解决记录,欢迎指正。