标签：datatable 多组单选按钮 predrawcallback drawcallback
最近在用jquery的datatable做项目，期间遇到一个需要生成多组单选按钮组的问题，且每一个单选按钮组的name均不相同，当然就想到用循环 去生成这些单选按钮组。生成单选按钮组本身没有任何问题，不过，当再次刷新列表界面时，生成的单选按钮组的name的下标就会变化。想要让循环变量从0开 始再进行循环，此时需要用到datatable的两个属性：preDrawCallback（刷新之前调用）和drawCallback（刷新之后调 用）。示例代码如下：
$(function () {
var taskId = $(‘#taskId‘).val();
var taskKey = $(‘#taskKey‘).val();
var savedOptionArray = new Array();
var savedCommentArray=new Array();
var xmhzListIdx = -1;
//datatable
oTable = $(‘#dataTable‘).dataTable({
"aaSorting": [
[ 1, "desc" ]
],//排序设置
"preDrawCallback": function( settings ) {
savedOptionArray = new Array();
for (var k= 0; k <= xmhzListIdx; k++) {
var projectId = $("#hid_projectId_" + k).val();
if (projectId) {
var optionVal = 0;
var comment= $("#hid_comment_" + projectId).val();
if (document.getElementById("option_"+projectId+"_agree").checked) {
optionVal = 1;
savedCommentArray["ID" + projectId] = comment;
} else if (document.getElementById("option_"+projectId+"_needEdit").checked) {
optionVal = 2;
savedCommentArray["ID" + projectId] = comment;
} else if (document.getElementById("option_"+projectId+"_delete").checked) {
optionVal = 3;
savedCommentArray["ID" + projectId] = comment;
}
savedOptionArray["ID" + projectId] = optionVal;
}
}
xmhzListIdx = -1;
},
"drawCallback": function( settings ) {
for(var key in savedOptionArray){
var projectIdLoop = key.substr(2);
var checkV = savedOptionArray[key];
if (checkV == 1) {
$("#option_"+projectIdLoop+"_agree").attr("checked", "checked");
$("#auditOpinion").val(savedCommentArray[key]);
$("#hid_comment_" + projectIdLoop).val(savedCommentArray[key]);
} else if (checkV == 2) {
$("#option_"+projectIdLoop+"_needEdit").attr("checked", "checked");
$("#auditOpinion").val(savedCommentArray[key]);
$("#hid_comment_" + projectIdLoop).val(savedCommentArray[key]);
$("#hid_commentId_" + projectIdLoop).css(‘display‘,‘block‘);
} else if (checkV == 3) {
$("#option_"+projectIdLoop+"_delete").attr("checked", "checked");
$("#auditOpinion").val(savedCommentArray[key]);
$("#hid_comment_" + projectIdLoop).val(savedCommentArray[key]);
$("#hid_commentId_" + projectIdLoop).css(‘display‘,‘block‘);
}
}
},
"ajax": {
"url": __CONTEXT__ + "/institute/xmylxHuizhong!list",
"type": "POST",
"data" : {
‘taskId‘ : taskId,
‘taskKey‘ : taskKey,
},
//后台传递参数
//"data": function ( d ) {
//var searchCondition = $("#projectgress").serializeArray();
//var searchResult = initialSearchCondition(searchCondition, d);
// return searchResult;
//},
},
"aoColumns": [
{
"mData":"projectName",
},
{
"mData":"applyPersonName",
},
{
"mData":"deptCodeName",
},
{
"mData":"specializedFieldName",
},
{
"mData":"projectPreliminary.summary",
},
{
"mData":"projectPreliminary.innovation",
},
{
"mData":"projectPreliminary.goal",
},
{
"mData":"projectPreliminary.cost",
},
{
"mData": "projectId",
"sortable": false,//控制单列的排序
"mRender": function (data, type, full) {
return ‘<a href="javascript:void(0)" + data + ‘);">编辑</a>‘;
}
},
{
"mData":"projectId",
"sortable": false,//控制单列的排序
"mRender": function ( data, type, full ) {
xmhzListIdx ++;
return ‘<input type="radio" id="option_‘+data+‘_agree" value="agree" name="option[‘+xmhzListIdx+‘]">同意 ‘+
‘<input type="radio" id="option_‘+data+‘_needEdit" value="needEdit" name="option[‘+xmhzListIdx+‘]">需要修改 ‘+
‘<input type="radio" id="option_‘+data+‘_delete" value="delete" name="option[‘+xmhzListIdx+‘]">删除‘+
‘<input type="hidden" id="hid_projectId_‘+xmhzListIdx+‘" name="projectId[‘+xmhzListIdx+‘]" value="‘+data+‘">‘+
‘<input type="hidden" id="hid_comment_‘+data+‘" name="comment[‘+xmhzListIdx+‘]">‘+
‘<a href="javascript:void(0)" id="hid_commentId_‘+data+‘" style="display:none;" name="commentId[‘+xmhzListIdx+‘]" onclick="addAndEditComment(‘+xmhzListIdx+‘);">修改意见</a>‘;
}
},
],
"bFilter": false,
"bInfo": true,
"bPaginate": true,
"bProcessing": true,
"bSort": true, //排序
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
/* Append the grade to the default row class name */
//渲染完表格后的处理事件
if (aData[2] == "1") {
$(‘td:eq(2)‘, nRow).html(‘<b>A</b>‘);
}
return nRow;
},
"bServerSide": true,
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条",
"sZeroRecords": "没有找到符合条件的数据",
//"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "没有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索",
"sProcessing": "加载中...",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
"bLengthChange": false, //用户不可改变每页显示数量
"iDisplayLength": 10, //每页显示10条数据
"sPaginationType": "full_numbers",//分页 页脚以 数字方式分页
});
return;
});
本文出自 “MOMO” 博客，请务必保留此出处http://4446664.blog.51cto.com/4436664/1603657
标签：datatable 多组单选按钮 predrawcallback drawcallback
原文地址：http://4446664.blog.51cto.com/4436664/1603657
