[关闭]
@songlaf 2017-11-26T15:22:00.000000Z 字数 5224 阅读 821

BhTable使用指南

一直很想找一个比较合适的DataTable控件，用过EasyUI、JqGrid等等，发现需要功能都不完全，最后觉得还是自己写一个吧，这样想要什么功能自己扩充就成了， 于是就写了一个BhTable，不想在界面上浪费太多时间，所以选择了在免费的AdminLTE主题下面进行开发。

打开可以加入我QQ群（552596594），进行讨论，有任何需求可以提出来，希望将来能做的更好。

一）引入Css和js

  1. <!--boostrap的css-->
  2.    <link href="<c:url value="/resources/plugins/bootstrap/css/bootstrap.min.css" />" rel="stylesheet">
  3.    <!--font-awesome-->
  4.     <link href="<c:url value="/resources/plugins/font-awesome/css/font-awesome.min.css" />" rel="stylesheet">
  5.        <!--adminlet-->
  6.     <link href="<c:url value="/resources/dist/css/AdminLTE.min.css" />" rel="stylesheet">
  7.     <link href="<c:url value="/resources/dist/css/skins/_all-skins.css" />" rel="stylesheet">
  8.     <link href="<c:url value="/resources/dist/css/bh.css" />" rel="stylesheet">

引入js

  1. <script src="<c:url value="/resources/plugins/jquery/jquery-3.2.1.js" />"></script>
  2. <script src="<c:url value="/resources/plugins/bootstrap/js/bootstrap.min.js" />"></script>
  3. <script src="<c:url value="/resources/dist/js/adminlte.min.js" />"></script>
  4. <script src="<c:url value="/resources/dist/js/bhCheck.js" />"></script>
  5. <script src="<c:url value="/resources/dist/js/bh.js" />"></script>

二)一个最简单的页面

在html页面写一个

  1. <div id="bhTable"></div>

javascript

  1.         $("#bhTable").bhTable({
  2.             url:"listByPage",
  3.             width:1100,
  4.             columns: [
  5.                 {name: 'id',title: "序号",width: 50,key: true, sotrable:true},
  6.                 {name: 'code', title: "编码",width: 100,sotrable:true},
  7.                 {name: 'name', title: "名称", width: 200, sotrable:true},
  8.                 {name: 'categoryName', title: "类别",sortField:'category_code',sotrable:true, width: 100},
  9.                 {name: 'price', title: "单价",width: 50, sotrable:true},
  10.                 {name: 'qty', title: "库存数量", width: 100, sotrable:true},
  11.                 {name: 'description', title: "备注", width: 400, sotrable: false}
  12.             ],
  13.             searchDiv:$("#gridSearch"),
  14.         });

属性说明：
1. url，后台的查询路径
2. width，显示的宽度
3. columns显示的列
列的内容：
name：字段名称
titile：列的标题
width：列的宽度
sortable：是否支持点击排序
sortField：排序的字段，当排序的字段名称和列的名称不一样的时候使用，比如显示的字段是CategoryName，但是排序的字段是cateGoryCode
4.searchDiv:查询条件的div，如果不需要查询条件可以不写，
searchdiv的内容如下：

  1. <div id="gridSearch">
  2.     <form class="form-inline">
  3.         <div class="form-group">
  4.             <label for="txtQueryCode">编码</label>
  5.             <input type="text" class="form-control input-sm" id="txtQueryCode" name="code">
  6.         </div>
  7.         <div class="form-group">
  8.             <label for="txtQueryName">名称</label>
  9.             <input type="text" class="form-control input-sm" id="txtQueryName" name="name">
  10.         </div>
  11.         <button type="button" class="btn btn-default btn-sm bg-blue bh-table-btn-query"><i class="fa fa-search"></i></button>
  12.     </form>
  13. </div>

传递到后台的查询json数组如下

  1. {
  2.     pageSize:10,//默认的分页大小
  3.     pageNow:1,//当前页面
  4.     name:"ddddd",//serachaDiv输入的查询条件
  5.     code:"aaaa",//serachaDiv输入的查询条件，
  6.     sortString:'code asc,name desc'//排序条件
  7. }

参考我的Demo程序里面的Mapper文件的listByPage，

  1. <select id="listByPage" parameterType="com.bh.demo.model.Product" resultMap="BaseResultMap">
  2.   SELECT  product.id,product.code,product.category_code,product_category.name as category_name,product.name,
  3.     product.price,product.qty,product.description
  4.   from
  5.       product
  6.   join
  7.       product_category on product_category.code = product.category_code
  8.   <where>
  9.     <if test="code!=null &amp;&amp; code != ''">
  10.       and product.code=#{code}
  11.     </if>
  12.     <if test="name!=null &amp;&amp; name != ''">
  13.       and product.name like concat('%',#{name},'%')
  14.     </if>
  15.   </where>
  16.   <if test="sortString!=null &amp;&amp; sortString != ''">
  17.     order by ${sortString}
  18.   </if>
  19.   </select>

后台返回的数据如下：
返回结果是根据pagehelper插件来定义的

  1.     pages:100, //页数
  2.     firstPage:true, //当前是否第一页,
  3.     hasNextPage:true, //是否有有下一页
  4.     hasPreviousPage:false,//是否有前一页
  5.     isFirstPage:true,//是否第一页
  6.     isLastPage: false,//是否最后一页
  7.     lastPage: 100,//最有页数
  8.     nextPage: 2,//下一页的页数
  9.     pageNow: 1,//当前页
  10.     startRow: 1,//开始行
  11.     endRow:100, //最后行
  12.     total: 10000,//所有行
  13.      list:[ //数据
  14.          {id:1,name:"abc"},
  15.          {id:2,name:"def"}
  16.      ]

三）一个CRUD的例子

  1.  $("#bhTable").bhTable({
  2.             url:"listByPage",
  3.             height: 400,
  4.             width:1100,
  5.             columns: [
  6.                 {name: 'id',title: "序号",width: 50,key: true, sotrable:true},
  7.                 {name: 'code', title: "编码",width: 100,sotrable:true},
  8.                 {name: 'name', title: "名称", width: 200, sotrable:true},
  9.                 {name: 'categoryName', title: "类别", index: 'categoryName',sortField:'category_code',sotrable:true, width: 100},
  10.                 {name: 'price', title: "单价",width: 50, sotrable:true},
  11.                 {name: 'qty', title: "库存数量", width: 100, sotrable:true},
  12.                 {name: 'description', title: "备注", width: 400, sotrable: false}
  13.             ],
  14.             rowEditColumn:true,
  15.             checkColumn:true,
  16.             searchDiv:$("#gridSearch"),
  17.             buttons:[{tag:"add",show:true,click:function () {
  18.                 layer.alert('你点击了增加操作',{icon:1});
  19.             }},
  20.                 {tag:"edit",show:true,click:function (rows) {
  21.                     layer.alert('你点击了编辑操作，选择的记录查看rows数组',{icon:2});
  22.                     console.log(rows);
  23.                 }},
  24.                 {tag:"delete",show:true,click:function (rows) {
  25.                     layer.alert('你点击了删除操作，选择的记录查看rows数组',{icon:3});
  26.                     console.log(rows);
  27.                 }},
  28.                 {tag:"refresh",show:true}],
  29.             rowButtons:[{tag:"edit",show:true,click:function (row,index) {
  30.                 layer.alert('你点击了edit操作，选择的记录查看rows数组,点击的记录是参数的row，序号是参数的index',{icon:4});
  31.                 console.log(row);
  32.                 console.log(index);
  33.             }},{tag:"delete",show:true,click:function (row,index) {
  34.                 layer.alert('你点击了delete操作，选择的记录查看rows数组,点击的记录是参数的row，序号是参数的index',{icon:4});
  35.                 console.log(row);
  36.                 console.log(index);
  37.             }}]
  38.         });

1.1)底部的导航条的代码

  1.   buttons:[{tag:"add",show:true,click:function () {
  2.         layer.alert('你点击了增加操作',{icon:1});
  3.         }},
  4.         {tag:"edit",show:true,click:function (rows) {
  5.             layer.alert('你点击了编辑操作，选择的记录查看rows数组',{icon:2});
  6.             console.log(rows);
  7.         }},
  8.         {tag:"delete",show:true,click:function (rows) {
  9.             layer.alert('你点击了删除操作，选择的记录查看rows数组',{icon:3});
  10.             console.log(rows);
  11.         }},
  12.         {tag:"refresh",show:true}],

tag:表示按钮的标志位,默认有四个标志位add,delete,update,refresh,可以自定义，具体的请看高级功能
show:表示这个功能是否显示
click:当按钮点击的时候执行的方法
注意这个方法的使用,带一个rows的参数，rows是当前grid选择的数据。
例如下列的代码

  1.     {tag:"delete",show:true,click:function (rows) {
  2.                     layer.alert('你点击了删除操作，选择的记录查看rows数组',{icon:3});
  3.                     console.log(rows);
  4.                 }},

layer我用的layer的插件，大家可以下看看，国人写的，很不错，我的目标，哈哈。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注