FoxBPM任务中心数据列表实现(基于JQuery DataTable)
FoxBPM任务中心目前用到JQuery DataTable控件的页面包括：用户列表、待办任务、已办任务、流程追踪，根据这四个页面整理出的功能需求如下：
1、服务器端分页
相对于服务器端分页，还可以采用浏览器缓存数据进行客户端分页，由于客户端分页是系统初始化时数据一次性加载，所以当数据量很大时页面加载会遇到瓶颈。采用服务器端分页就可以避免这样的问题，页面初始化只需要加载每页数据，进行分页操作时，根据分页信息重新请求服务器加载数据。
2、展示的列可以动态的选择
该功能可以使得系统对用户更加友好，不同用户可以选择性的查看数据，是一个很实用的页面功能。
3、动态展示分页信息
为用户提供更加直观的分页信息 ，页面展示为 “当前显示 1 到 1 条，共 1 条记录”。
4、动态定制检索条件
JQuery DataTable默认的检索控件是很难满足不同的业务场景的，由于JQuery DataTable默认的检索控件支持手工设置、动态渲染，所以我们可以借助它的渲染机制动态绑定自己的控件，然后在通过自定义函数和DataTable API实现检索功能。
5、相关列的动态排序
根据用户的不同需求实现不同列的正反排序，支持正反排序的动态切换。
6、所有表格控件支持中文标题
JQuery DataTable控件默认标题是英文的，统一改成中文。
7、表格控件的布局
控件的默认布局是固定的，根据用户通常的操作习惯修改布局。目前是 表格左上是“检索”控件， 右上 是“展示列”按钮，左下动态展示分页信息，右下 是“分页”控件。
8、列的宽度进行自适应展示
由于每行每列的内容已经内容宽度都不是固定的，不同的用户对应客户端分辨率也不同，所以内容不确定的列支持自适应。
9、通过回调函数对页面元素手工修改
整个表格都是由BootStrap框架生成的，在整体结构不变的情况下，可以通过回调函数对页面元素的式样进行微调。
BootStrap 实例html如下所示：
<section id="widget-grid" class="">
<div class="row">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false">
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>待办任务</h2>
</header>
<div>
<div class="jarviswidget-editbox">
</div>
<div class="widget-body no-padding">
<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>任务</th>
<th>优先级</th>
<th>发起人</th>
<th>状态</th>
<th>创建</th>
<th>期限</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- end widget grid -->
<script src="../portal/jsportal/todotasks.js"></script>
<script src="../portal/js/foxbpm/common.js"></script>
<script type="text/javascript">
pageSetUp();
// load related plugins
loadScript("../js/plugin/datatables/jquery.dataTables.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.colVis.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.tableTools.min.js", function(){
loadScript("../js/plugin/datatables/dataTables.bootstrap.min.js", function(){
loadScript("../js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
});
});
});
});
</script> 解析：
1、以上HTML 由BootStrap提供，可以添加代码，但是不建议修改。
2、loadScript函数第一个参数是需要加载的js文件相对路径，第二个参数是回调函数。其功能是加载js文件定义到前端客户端内存中，如上所示加载的js文件都是由BootStrap提供的Data Tablek控件必须的JS文件。
3、pagefunction函数是整个表格加载的核心函数，在todotasks.js文件中定义，详细代码如下所示：
var table= $('#datatable_col_reorder')
.DataTable(
{
columns : [
{
data : 'initiator'
},
{
data : 'subject'
},
{
data : 'startTime'
},
{
data : 'updateTime'
},
{
"orderable" : false,
"data" : 'instanceStatus',
"defaultContent" : "-"
},
{
data : 'initatorName'
},
{
"orderable" : false,
"data" : 'processLocation',
"defaultContent" : "-"
},
{
"orderable" : false,
"data" : null,
"width":"15%",
"defaultContent" : ""//"<a href='javascript:void(0);' class='btn btn-danger'>查看</a> "
} ],
columnDefs : [
{
"targets" : [ 0 ],
"orderable" : false,
"width":20,
"createdCell" : function(td, cellData,
rowData, row, col) {
$(td).html("<img width='20' height='20' class='online' src='/foxbpm-webapps-common/service/identity/users/"+cellData+"/picture'/>");
}
},
{
"targets" : [ 1 ],
"createdCell" : function(td, cellData,
rowData, row, col) {
//任务主题避免这行
if(cellData.length>24){
$(td).html(cellData.substring(0,20)+"<b> . . .</b>");
}else{
$(td).html(cellData);
}
}
},
{
"targets" : [ 4 ],
"orderable" : true,
"createdCell" : function(td, cellData,
rowData, row, col) {
if (rowData.endTime == null) {
$(td)
.html(
"<span class='label label-default'>激活</span>");
if (rowData.isSuspended == 'true') {
$(td)
.html(
"<span class='label label-default'>暂停</span>");
}
if (rowData.assignee == null) {
$(td)
.html(
"<span class='label label-default'>未领取</span>");
}
} else {
$(td)
.html(
"<span class='label label-default'>完成</span>");
}
}
} ,
{
"targets" : [ 7 ],
"orderable" : true,
"createdCell" : function(td, cellData,
rowData, row, col) {
var tdHtml = "<a class='btn btn-default btn-xs' href='javascript:void(0);' onclick=viewForm('"+rowData.formUriView+"','"+rowData.id+"','"+rowData.bizKey+"');><i class='fa fa-pencil-square-o'></i> 查看</a>"+
" <a class='btn btn-default btn-xs' href='javascript:void(0);' onclick=showDiagram('"+rowData.processDefinitionKey+"','"+rowData.id+"');><i class='fa fa-sitemap'></i> 流程图</a>";
$(td).html(tdHtml);
}
}],
"processing" : true,
"orderable" : true,
"serverSide" : true,
"ajax" : _serviceProcessInstanceUrl,
"sDom" : "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'>C>"
+ "t"
+ "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p l>>",
"autoWidth" : true,
"colVis" : {
"buttonText" : "展 示 列",
"restore" : "恢复默认展示",
"showAll" : "展示所有列",
"showNone" : "不展示列"
},
"oLanguage" : {
"sProcessing" : "正在加载中......",
"sZeroRecords" : "对不起，查询不到相关数据！",
"sEmptyTable" : "表中无数据存在！",
"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
},
"sSearch": "_INPUT_ "+
"<select id='TASKSTATE_SEARCH' class='form-control'><option value='0'>未领取</option><option value='1'>领取</option><option value='2' selected>所有</option></select> " +
" <input placeholder='创建起始' id='createtime_start_dateselect_filter' type='text' class='form-control datepicker' data-dateformat='yy-mm-dd' style='width:15%'>" +
"<label for='createtime_start_dateselect_filter' class='glyphicon glyphicon-calendar no-margin padding-top-15' rel='tooltip' title='' style='left:-50%;top:-5px'></label>" +
" - " +
"<input placeholder='创建终止' id='createtime_end_dateselect_filter' type='text' value='' class='form-control datepicker' data-dateformat='yy-mm-dd' style='width:15%'>"+
"<label for='createtime_end_dateselect_filter' class='glyphicon glyphicon-calendar no-margin padding-top-15' rel='tooltip' title='' style='left:-32%;top:-5px'></label> " +
" <a class='btn btn-primary' style='height: 30px; disabled: true;' onclick='searchTodoTask();' href='javascript:void(0);'>搜索</a> <a class='btn btn-primary' style='height: 30px; disabled: true;' href='javascript:void(0);' onclick='clearCondition();'>重置</a></form>"
},
"bStateSave" : false,
"bAutoWidth" : true,
"sPaginationType" : 'full_numbers',
"drawCallback":function(){
//调整页面布局
$("#datatable_col_reorder_length").css("padding-right","10px");
$(".dt-toolbar").css("padding-bottom","6px");
$(".dt-toolbar").css("padding-right","64px");
$("#datatable_col_reorder_filter").css("width","900px");
$("[type='search']").attr("placeholder","主题/发起人");
pageSetUp();
}
});pagefunction函数说明：通过DataTable函数创建一个表格 ：var todoTable = $('#datatable_fixed_column').DataTable({config}); datatable_fixed_column对于HTML中定义的table。得到的todoTable对象时JQuery DataTable对象，利用其ajax接口可以重新加载数据 如todoTable.ajax.url(baseUrl).load()。
创建DataTable重点配置如下：
1、“drawCallback”
drawCallback是 DataTable创建后的回调函数，目前页面创建后的式样微调都通过该函数进行。
2、“oLanguage”
该配置项负责表格控件的语言配置，目前页面的检索控件是通过该机制进行手工渲染。
3、“sDom”
负责表格控件的布局工作，其有独立的语法规则,如“f”表示检索控件、“C”表示选择列控件等。
4、“columns”
表示列定义，其定义的顺序必须和HTML 定义的 表头一致。
5、“columnDefs”
表示列规则定义，包括列的式样定义、列的数据内容定义。
6、“sSearch”
人工设置渲染检索控件。
7、“serverSide”
表示数据分页采用服务器端分页，只需要通过ajax设置服务器地址就可以。
JQuery DataTable 控件的API参考地址(包括所有操作的API和DEMO)：
http://datatables.net/reference/option/
Foxbpm任务中心的待办任务列表的最终实现如下图所示：
====================================================================
声明：本文首发iteye blog，转载请注明作者信息及原文地址，谢谢
作者信息：
马恩亮（[email protected]）
=====================================================================