DataGrid标签
(1)列过滤实现
filterBtn的使用
(2)Datagrid 风格切换
Datagrid 风格切换,切换bootstrap-table风格
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>请假表单管理</title>
<meta name="viewport" content="width=device-width" />
<t:base type="bootstrap,bootstrap-table,layer"></t:base>
</head>
<body>
<t:datagrid >
标签内容
</t:datagrid>
</body>
</html>
(3)Bootstrap-table风格下 自定义查询条件
<!-- 自定义查询条件 start -->
<div class="panel-body" style="padding-bottom:0px;">
<div class="accordion-group">
<div id="collapse_search" class="accordion-body collapse">
<div class="accordion-inner">
<div class="panel panel-default" style="margin-bottom: 0px;">
<div class="panel-body" >
<form id="searchForm" class="form form-horizontal" action="" method="post">
<!-- 自定义查询字段 start -->
<div class="col-xs-12 col-sm-6 col-md-4">
<label for="name">名称:</label>
<div class="input-group" style="width:100%">
<input type="text" class="form-control input-sm" id="name" name="name">
</div>
</div>
<!-- 自定义查询字段 end-->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="input-group col-md-12" style="margin-top:20px">
<a type="button" onclick="searchList();" class="btn btn-primary btn-rounded btn-bordered btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</a>
<a type="button" onclick="searchRest();" class="btn btn-primary btn-rounded btn-bordered btn-sm"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> 重置</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 自定义查询条件 end-->
<t:datagrid >
标签内容
</t:datagrid>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<div class="easyui-layout" fit="true">
<div region="center" style="padding:0px;border:0px">
<t:datagrid name="functionList" title="menu.manage" actionUrl="functionController.do?functionGrid" idField="id" treegrid="true"
pagination="false" btnCls="bootstrap btn btn-normal btn-xs">
<t:dgCol title="主键" field="id" treefield="id" hidden="true"></t:dgCol>
<t:dgCol title="菜单名称" field="functionName" treefield="text" width="40"></t:dgCol>
<t:dgCol title="图标" field="TSIcon_iconPath" treefield="code" image="true" width="10"></t:dgCol>
<t:dgCol title="菜单类型" field="functionType" treefield="functionType" replace="funcType.page_0,funcType.from_1" width="20"></t:dgCol>
<t:dgCol title="菜单地址" field="functionUrl" treefield="src" width="80"></t:dgCol>
<t:dgCol title="菜单顺序" field="functionOrder" treefield="order" width="12"></t:dgCol>
<t:dgCol title="菜单图标样式 " field="functionIconStyle" treefield="iconStyle" width="25"></t:dgCol>
</t:datagrid>
</div>
</div>
<t:base type="jquery,easyui,tools,DatePicker,autocomplete"></t:base>
<div class="easyui-layout" fit="true">
<div region="center" style="padding:0px;border:0px">
<t:datagrid name="jeecgDemoList" title="dgCol标签讲解" idField="id" checkbox="true" pagination = "true" pageSize="10" queryMode="group" fitColumns="true"
actionUrl="jeecgListDemoController.do?datagrid" rowStyler="myRowStyler">
<t:dgCol title="id" field="id" hidden="true" width="120"></t:dgCol>
<t:dgCol title="名称" query="true" showLen="3" field="name" hidden="false" width="120"
extendParams="styler: function(value,row,index){if(value=='花花'){return 'background-color:#ffee00;color:red;';}}">
</t:dgCol>
<t:dgCol title="部门" field="depId" query="true" dictionary="t_s_depart,id,departname" width="120"></t:dgCol>
<t:dgCol title="性别" field="sex" dictionary="sex" width="120" ></t:dgCol>
<t:dgCol title="电话" field="phone" queryMode="group" width="120" ></t:dgCol>
<t:dgCol title="工资" field="salary" width="120" align="right" formatterjs="salaryFormat"></t:dgCol>
<t:dgCol title="是否入职" field="status" dictionary="sf_yn" width="120" ></t:dgCol>
<t:dgCol title="创建日期" query="true" queryMode="group" field="createDate" formatter="yyyy-MM-dd hh:mm:ss" width="120"></t:dgCol>
</t:datagrid>
<script type="text/javascript">
/**行风格增加特效*/
function myRowStyler(index,row){
//如果工资大于5w给特殊背景色等效果
if(row.salary > 50000){return 'background-color:#1ab394;color:#fff;font-weight:bold;';}
}
/**处理数字千分符*/
function salaryFormat(value,row,index){
if(!value) return "";
var strs = value.toString().split('.');
var str_n = strs[0];
var result="";
while(str_n.length>3){
result=","+str_n.slice(-3)+result;
str_n=str_n.slice(0,str_n.length-3)
}
//var re=/(?=(?!(\b))(\d{3})+$)/g;
return str_n+result+"."+strs[1];
}
</script>
</div>
</div>