列表页面引入 js、css

<link href="/build/common/gridList.css" rel="stylesheet">
<script type="text/javascript" src="/build/common/gridList.js"></script>

列表检索

搜索框部分参考页面，替换 搜索内容 input 框 id

id 的规则如下： filter$VLK
filter : 为过滤的字段名，默认为数据库字段名
$ : 为分隔符
V : 为字段类型标识，可选 V(VARCHAR)，N(NUMBER)，D(DATE)（会通过类型来进行转换）
LK: 后面部分为查询条件，可选 EQ 相等、LT 小于、GT 大于、 LK 相似、LFK 、IN 、NOT_IN

eg：fullname_$VLK 为 like 搜索数据库字段为 fullname_ 的数据

数据表格

数据表格使用 bootstrap table 具体配置参考文档
可以参考definitionList.html页面

此处做了部分改造
openDialog 为打开一个对话框
sendAction 为发起一个请求，并弹出确认弹框
内置格式化方法： labelFormatter 格式化数据字典不同样式的展示，dateTimeFormatter、 dateFormatter 时间格式化 ，innerHtmlFormatter将text内容格式化成HTML，如管理列

<table ab-grid data-id-field="id" data-url="bpm/definition/listJson">
	<thead>
		<tr>
			<th data-checkbox="true">序号</th>
			<th data-field="name">名称</th>
			<th data-field="key">流程定义KEY</th>
			<th data-field="actDefId">ActDefId</th>
			<th data-field="status" data-formatter="labelFormatter"
				data-value-style="publish-发布-primary,forbidden-禁用-warning,draft-草稿-info,">状态</th>
			<th data-field="version">版本</th>
			<th data-field="desc">描述</th>
			<th data-field="id" data-formatter="innerHtmlFormatter" data-title="管理">
				<span class="fa-trash btn btn-outline  btn-primary btn-sm" qtip='删除' sendAction="删除" url="bpm/definition/remove?id={id}"></span>
				<span class="fa-edit btn btn-outline btn-primary btn-sm" qtip='流程设计' openDialog="流程设计" top="true" url="/flow-editor/modeler.html?modelId={actModelId}"></span>
				<span ng-if="{status}=='publish'" class="fa-send btn btn-outline btn-primary btn-sm" qtip='启动' openDialog="启动" top="true" url="bpm/definition/start.html?defId={id}"></span>
			</th>
		</tr>
	</thead>
</table>