# sh-table
**Repository Path**: cangjingge/sh-table
## Basic Information
- **Project Name**: sh-table
- **Description**: 支持模版语言的表格组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-03-06
- **Last Updated**: 2022-05-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 1.简介
shTable.js是一款基于templatejs的前端表格jquery插件。可以很大程度上提高开发效率。软件生态是基于传统jquery生态的，对于一些老项目兼容性良好。很轻松就可以引入。
### 产生背景
对于一些老的web项目，渲染引擎大部分是jsp，FreeMarker,等模板引擎进行渲染的。有很多缺点，比如
1.页面报错直接展示异常，
2.性能低下，因为是服务的渲染的，现在大部分客户端设备性能都比较高，所以转移到客户端渲染能节省很大成本
3.不易做技术转型，现在流行的架构体系是前后端分离，老模式依赖服务的渲染。所以不易重构前端技术
所以tablejs出现就解决了以上问题，把模板渲染转移到了前端，以节省服务器性能开销，开发模式为ajax请求数据的方式，方便以后前端转型成更前卫的技术，比如vue，react等等。
### 功能简述
1.支持ajax分页。不用写分页逻辑
2.支持多选，单选，支持分页选择，用法简单明了。
3.支持纯前端分页
4.支持自定义过滤器，方便转换字段展示的值
5.无污染的表格事件绑定，很方便做自定义事件开发
6.支持树形表格。
# 2.如何引入
以下为全部所需要的js依赖，如果部分在你的项目中已经存在可以不用引入。
```html
//渲染引擎依赖
//jquery依赖如果你项目中有了可以不引
//最新版tablejs
//最新版分页插件
```
## 引入css:
```html
//例如使用sop ui
```
完成以上步骤即可开始使用shTable进行快速项目开发了。
tip:
建议把以上依赖整理到一个公共的头部，这样就不用每次都引用这些文件了
# 3.开始开发
写一个table只需要两步即可完成
## (1).写表格模板
模板内容写在script标签中，标签type属性为text/html
```html
//忽略资源引入部分代码节省空间。请自行引入
```
## (2).写js
```javascript
var mockDataService={
list:function(){
return:$.ajax({url:"www.baidu.com"});
}
}
var tabledemo = shTable({
templateId: "table",
data: [],
//下级数据字段名
childField:"childs",
ajax: {
//ajax方法对象，注意不要加()，交给tablejs去执行就好了。不要自己执行
method: mockDataService.list,
/*参数构造器*/
paramBuilder: function () {
/*每次调用后台会加上这里的参数进行查询后台。*/
return {};
}
},
pagination:{
/*是否ajax分页*/
open: true,
/*分页大小*/
pagesize: 10
},
/*表格事件后面会专门讲*/
tableEvent: {
add: function (tableObj, row) {
console.log(JSON.stringify(row))
}
}
})
```
完成以上两步即可完成一个表格的开发
# 4.详细配置项文档
## 配置项总览：
这里给出所有配置项含义。不用一个个记住。需要配置的时候过来查即可。一般的都会有默认值提供给你。你用的时候一般也只需要用其中几个配置项。不会全部用到。
```javascript
var defaultSetting = {
templateId: "table",
/*表格展示容器jquery dom对象*/
containerEl: undefined,
/*待注册事件*/
tableEvent: {
add: function (tableObj, row，targetEl) {
console.log("You triggered the default add event! data -->")
console.log(JSON.stringify(row))
}
},
/*数据过滤器*/
filters: {
testFilter: function (v,param) {
return "testFilter"
}
},
/*ajax配置*/
ajax: {
/*ajax方法，如果使用spring mvc contentType要么不填要么用：contentType:"application/x-www-form-urlencoded" */
method: undefined,
/*参数构造器,如果return false会阻止请求继续进行*/
paramBuilder: function () {
console.log("default paramBuilder!");
return {};
},
/*ajax成功回调,如果你需要对表格行内数据通过js绑定事件，要么通过tableEvent绑定要么在该回调中绑定。否则写法不对可能会绑定失败*/
successCallBack: function (tableObj, data) {
console.log("date load success!");
},
/*ajax请求前置事件*/
ajaxBefore: function (tableObj) {
console.log("before ajax method!");
},
/*第一次初始化是否自动加载*/
autoLoad: true,
/*ajax加载成功后渲染页面之前执行数据处理逻辑*/
beforeRenderFilter: function (data, defer, _this) {
/*模拟异步加载*/
defer.resolve(data);
}
},
/*分页配置*/
pagination: {
open: true,
pagesize: 10,
/*分页条模式 0 正常情况 1 带自定义跳转页数功能 2 可以切换每页显示数目 3 hbase分页模式*/
pageModel: 2,
/*分页属性名配置*/
pageField: {
page: "page",
totalRecords: "totalRecords",
pagesize: "pageSize",
/*hbase分页模式row属性名*/
rowKey: "rowKey"
}
},
data: [],
/*初始化成功回调*/
successCallBack: function () {
console.log("table init success");
},
/*控制表格样式，给表格添加class,和style*/
tableStyle: {class: "ui table", style: ""},
/*控制分页条样式，给分页条添加class,和style*/
pageStyle: {class: "s-pages", style: ""}
};
```
# 5.过滤器使用
过滤器应用场景为。某些值是一些类型值。比如1代表js，2代表java,3代表c++展示的时候我不想展示123.而是展示具体含义。
这时候就可以使用过滤器来实现。会比较优雅。
## (1).js中注册一个过滤器
语法如下。其实就是一个方法。
```javascript
shTable({
//省略其他配置项
......
filters: {
testFilter: function (v,param) {
if(v==1){
return "情况1"
}
if(v==2){
return "情况2"
}
return "默认值"
}
}})
```
## (2).模板中使用过滤器
使用过滤器语法为：原值|过滤器名称
```
| {{item.userCode|testFilter}} |
```
# 6.事件注册
## (1).js中注册一个事件
语法如下。类似过滤器也是一个方法。
```javascript
shTable({
//省略其他配置项
......
tableEvent: {
add: function (tableObj, row，targetEl) {
console.log("You triggered the default add event! data -->")
console.log(JSON.stringify(row))
},
move: function (tableObj, row，targetEl) {
console.log("You triggered the default move event! data -->")
console.log(JSON.stringify(row))
}
}
})
```
## (2).模板中绑定事件
使用方式为：模板中给标签添加tableEvent属性，支持绑定单个事件和多个事件
例如：
### 单事件绑定语法
```
添加 |
```
### 多事件绑定语法：
```
移动 |
```
# 7.开启checkbox/radio
checkbox和radio的支持是tablejs自动探测的。不需要单独写js进行配置。只要你模板中有了响应的结构自动即可支持。
注意：checkbox和radio元素上必须有row-key属性。值为某个唯一属性对应的key的字符串。或者全局配置rowKey也可以
## 开启checkbox
模板中做如下配置则可自动打开checkboxModel
```
th第一行添加：
|
td第一行添加：
|
row-key必须是唯一的，而且必须配置，否则无法启用成功
```
## 开启radio
模板中做如下配置则可自动打开radioModel
```
th第一行添加：
|
td第一行添加：
|
row-key必须是唯一的，而且必须配置，否则无法启用成功
```
# 8.v2m单向数据流
该特性支持可编辑表格开发，给表单项绑定v2m-model后，可以自动绑定页面元素和表格数据对象对应的值。当编辑表格中的内容时，数据会自动变化，不需要人为去重新取值。大大提高开发小效率。
## 基础用法如下：
绑定v2m-model属性名,并且绑定index属性即可。
```html
常规：
```
## 高级用法：
当你需要应对一些自定义组件取值的情况的时候；可以用自定义get来使用
用法为：
需要绑定一个v2m-model-get属性，参数为tableEvent中注册的某一个方法;
比如我并不想直接取textarea的text而是取checks属性的值：
```
```
```javascript
tableEvent: {
/*在这里注册事件列表*/
authsGet: function (tableObj, row, el) {
return $(el).attr("checks")
}
}
```
# 9.api接口
| api | 参数 |返回|
| ------------ | ------------ |------------ |
| doAjaxLoad | index：请求页码，不必传 | 重新加载ajax请求，无返回值|
| getCheckedKeys | 无 |当前选中的key列表|
| getCheckedObject | 无 |当前选中的对象列表|
# 10.常见问题
| 问题 | 解决方案 |
| ------------ | ------------ |
| 超大数字类型数据失真 | 后台转换成string类型 |