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> " +
                    		"&nbsp;&nbsp;<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> " +
                    		"&nbsp;<a class='btn btn-primary' style='height: 30px; disabled: true;' onclick='searchTodoTask();' href='javascript:void(0);'>搜索</a>&nbsp;&nbsp;<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]） 

=====================================================================