注意还需要额外下载扩展的easyui的插件datagrid-detailview.js(ps:直接进easyui的中文官网就能够下载)
$(function () {
$('#pl').datagrid({
height: $("#body").height() + 500,
width: $("#body").width(),
idField: 'id',
<span style="color:#FF0000;">view: detailview,</span>
queryParams: '',
url: 'risk/getsuitlist.htm',
fit: true,
fitColumns: true,
striped: true,
nowrap: true,
rownumbers: true,
showPageList: false,
pagination: true,
singleSelect: true,
columns: [[
// {field: 'id', checkbox: true, width: 70, halign: "center", align: "center"},
{field: 'suitName', title: '题套名字', width: 70, halign: "center", align: "center"},
{field: 'submitedTime',title: '提交时间',width: 50,halign: "center",align: "center",formatter: formatDatebox},
{field: 'suitStatus', title: '当前状态', width: 50, halign: "center", align: "center",
formatter: function (value, row, index) {
if (value == 10 || value == "") {return '待审核';}
else if (value == -10) {return '审核拒绝';}
else if (value == 20) {return '审核通过';}
else if (value == 30) {return '发布成功';}
}
},
{
field: '操作', title: '操作', width: 100, halign: "center", align: "center",
// 添加超级链,并将来文号作为参数传入
formatter: function (value, row, index) {
if (row.ICONCLS && row.ICONCLS.length > 0) {
} else {
/* <a href="toeditManager.htm?id='+row.id+'">编辑</a>*/
//链接进行编辑,删除,设置权限等操作
var s = '<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="pl_tool.additem(' + index + ');" style="color:#75b7ff;">添加</a>'
+ '| <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="pl_tool.dataremove(' + index + ');" style="color:#75b7ff;">编辑</a>'
+ '| <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="pl_tool.setauthority(' + index + ');" style="color:#75b7ff;">删除</a>'
+ '| <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="pl_tool.resetpassword(' + index + ');" style="color:#75b7ff;">提交</a>';
return s;
}
}
}
]],
toolbar: '#pl_tool',
<span style="color:#FF0000;">detailFormatter</span>:function(index,row){
return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
},
<span style="color:#FF0000;">onExpandRow</span>:function(index,row) {
$('#ddv-' + index).datagrid({
url: 'risk/getsuiteitem.htm?suiteId='+(row.id),
fitColumns: true,
// singleSelect: true,
height: '100', // <span style="color:#FF6666;">加个高度可以出现滚动条</span>
rownumbers: true,
columns: [[
{field: 'content', title: '题目', width: 100, halign: "center", align: "center"},
{field: 'itemContent', title: '选项', width: 70, halign: "center", align: "center"},
{field: 'itemScore', title: '分数', width: 70, halign: "center", align: "center"},
]],
onResize:function(){
$('#pl').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#pl').datagrid('fixDetailRowHeight',index);
},0);
},
onClickRow: function (rowIndex, rowData) { // <span style="color:#FF6666;">点击表格中的行不选中</span>
$(this).datagrid('unselectRow', rowIndex);
},
});
}
BTW:其实easyui还挺简单的,看着api很容易进行快速开发