原文内容链接:https://www.cnblogs.com/so-easy/p/8081110.html
1. 仿照实现JS
<script>
var table ;
$(document).ready(function() {
table = $('#dataGrid').dataTable(
{
"bProcessing" : true,
"bFilter" : false,// 搜索栏
"bLengthChange" : false,// 每行显示记录数
"bSort" : false,// 排序
"sPaginationType" : "full_numbers",
"bServerSide" : true,
"scrollY" : 600,
"scrollCollapse" : true,
fixedHeader : true,
"bPaginate" : false,// 分页按钮
columnDefs : [ {
targets : 1,
"render" : function(data, type, row) {
return "<span class='row-details row-details-close' data_id='"
+ row.menu_id + "'>" + data + "</span>";
}
} ],
"sAjaxSource" : '../../sys/menu/list?_' + $.now(),
"fnServerParams" : function(aoData) {
aoData.push({
"name" : "parent_id",
"value" : 0
})
},
"columns" : [
{
"data" : "menu_id",
"width" : "50",
"visible" : false
},
{
"data" : "name",
"width" : "100"
},
{
"data" : "parentName",
"width" : "180"
},
{
"data" : "icon",
"width" : "50",
"render" : function(data, type, row, meta) {
return row.icon == null ? ''
: '<i class="' + row.icon
+ ' fa-lg"></i>';
}
},
{
"data" : "type",
"width" : "50",
"render" : function(value, row, index) {
if (index.type === 0) {
return '<span class="label label-primary">目录</span>';
}
if (index.type === 1) {
return '<span class="label label-success">菜单</span>';
}
if (index.type === 2) {
return '<span class="label label-warning">按钮</span>';
}
}
}, {
"data" : "order_num",
"width" : "50"
}, {
"data" : "url",
"width" : "100"
}, {
"data" : "perms",
"width" : "200"
} ],
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"type" : 'POST',
"url" : sSource,
"dataType" : "json",
"data" : aoData,
"success" : function(resp) {
fnCallback(resp);
}
});
},
});
table.on('click', ' tbody td .row-details', function() {
var nTr = $(this).parents('tr')[0];
if (table.fnIsOpen(nTr))// 判断是否已打开
{
/* This row is already open - close it */
$(this).addClass("row-details-close").removeClass(
"row-details-open");
table.fnClose(nTr);
} else {
/* Open this row */
$(this).addClass("row-details-open").removeClass(
"row-details-close");
// 调用方法显示详细信息 data_id为自定义属性 存放配置ID
fnFormatDetails(nTr, $(this).attr("data_id"));
}
});
});
function fnFormatDetails(nTr, pdataId) {
$.ajax({
type : 'post',
url : '../../sys/menu/list?_' + $.now(),
dataSrc : '',
data : {
"parent_id" : pdataId
},
dataType : "text",
async : true,
success : function(data, textStatus) {
if (textStatus == "success") { // 转换格式 组合显示内容
var res = eval("(" + data + ")");
var sOut = '<table class="table table-bordered compact">';
for (var i = 0; i < res.aaData.length; i++) {
sOut += '<tr>';
sOut += '<td style="display:none;">' + res.aaData[i].menu_id
+ '</td>';
sOut += '<td >' + res.aaData[i].name + '</td>';
sOut += '<td >' + res.aaData[i].parentName + '</td>';
sOut += '<td >' + res.aaData[i].icon + '</td>';
sOut += '<td >' + res.aaData[i].type + '</td>';
sOut += '<td >' + res.aaData[i].order_num + '</td>';
sOut += '<td >' + res.aaData[i].url + '</td>';
sOut += '<td >' + res.aaData[i].perms + '</td>';
sOut += '</tr>';
}
sOut += '</table>';
table.fnOpen(nTr, sOut, 'details');
}
},
error : function() {// 请求出错处理
table.fnOpen(nTr, '加载数据超时~', 'details');
}
});
}
</script>