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>

(4)多字段排序