# ul-table

**Repository Path**: diycp/ul-table

## Basic Information

- **Project Name**: ul-table
- **Description**: 一个后端写的对前端的解决方案
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: v2
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-08-03
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ul-table

#### 项目介绍
后台管理通用表格，增删改查，基于layui

一个后端写的前端插件

#### 演示地址
[演示地址](http://zhd.ulcodes.com/ul-table/)

#### 版本说明
v2.1.0
- 优化表格配置新增变量，如：{name}{desc}
- 新增辅助文字

`如更新这一版本，需要对表格参数加上大括号` 


#### 使用教程

```
<script>
var ut = new ultable();
ut.run({
    id: 'table', // 容器id
    config: 'ajax/getConfig.json', // 配置文件
    autoload: true, // 首次进入自动加载内容
    limit: 10, // 每页显示条数
    page: 1, // 当前页
    headerFixed: false, // 表头固定
    // 用于对分页请求的参数：page、limit重新设定名称
    request: {
        pageName: 'page' //页码的参数名称，默认：page
        , limitName: 'limit' //每页数据量的参数名，默认：limit
    },
    // 用于对返回的数据格式的自定义
    response: {
        statusName: 'state' //数据状态的字段名称，默认：state
        , statusCode: true //成功的状态码，默认：true
        , msgName: 'msg' //状态信息的字段名称，默认：msg
        , countName: 'count' //数据总数的字段名称，默认：count
        , dataName: 'data' //数据列表的字段名称，默认：data
    }
});
</script>
```

#### 配置说明
``` json
{
	"select-url": "查询接口",
	"insert-url": "添加接口",
	"update-url": "修改接口",
	"delete-url": "删除接口",
	"table": [列1,列2,列n...],
	"select": [条件1，条件2，条件n...],
	"insert": [参数1，参数2，参数n...],
	"update": [参数1，参数2，参数n...],
	"delete": [唯一标识],
	"otder-operate": [{
		"title": "操作名",
		"url": "接口地址",
		"edit": [参数1，参数2，参数n...],
		"param": [唯一标识]
	}, {
		"title": "操作名",
		"method": "函数名",
		"param": [唯一标识]
	}]
}
```
#### 例子
可参考ajax/getConfig.json


#### 参数说明(表格显示变量需加上大括号，具体请参考ajax/getConfig.json)
<table>
<tr>
    <th>参数名</th>
    <th>必须</th>
    <th>解释</th>
</tr>
<tr>
    <td>select-url</td>
    <td>是</td>
    <td>查询接口</td>
</tr>
<tr>
    <td>insert-url</td>
    <td>否</td>
    <td>添加接口</td>
</tr>
<tr>
    <td>update-url</td>
    <td>否</td>
    <td>修改接口</td>
</tr>
<tr>
    <td>delete-url</td>
    <td>否</td>
    <td>删除接口</td>
</tr>
</table>

<table>
<tr>
    <th>解释</th>
    <th>代码</th>
</tr>
<tr>
    <td>文本框</td>
    <td>
    {"name":"name","title":"姓名","type":"text","width":200}
    </td>
</tr>
<tr>
    <td>多行文本</td>
    <td>
    {"name":"desc","title":"简介","type":"textarea","width":200}
    </td>
</tr>
<tr>
    <td>富文本</td>
    <td>
    {"name":"desc","title":"简介","type":"layedit"}
    </td>
</tr>
<tr>
    <td>下拉框</td>
    <td>
    {"name":"class","title":"班级","type":"select","width":200,"value":[{"key":001","value":"一班"},{"key":002","value":"二班"},{"key":003","value":"三班"}],"default":"001"}
    </td>
</tr>
<tr>
    <td>时间控件</td>
    <td>
    {"name":"time","title":"时间","type":"time"}
    </td>
</tr>
<tr>
    <td>图片（支持自动提取字符串中的图片）</td>
    <td>
    {"name":"img","title":"图片","type":"img","width":200}
    </td>
</tr>
<tr>
    <td>图片+文字链接</td>
    <td>
    {"aname":"url","atitle":"文字","type":"a+img","title":"图片加链接","imgname":"img","width":200}
    </td>
</tr>
<tr>
    <td>a标签</td>
    <td>
    {"name":"url","href":"url","title":"地址","type":"a","width":200}
    </td>
</tr>
<tr>
    <td>多字段共用一列</td>
    <td>
    {"name":"{name}{pwd}","title":"多字段","type":"text","width":200}
    </td>
</tr>

</table>
<table>
    <tr>
        <td>name</td>
        <td>参数名，如：name,sex,desc</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题，如：用户名，性别，备注</td>
    </tr>
    <tr>
        <td>type</td>
        <td>类型，如：url,text,textarea,layedit,img,a+img,select</td>
    </tr>
    <tr>
        <td>width</td>
        <td>列宽，如：200</td>
    </tr>
    <tr>
        <td>url</td>
        <td>a类型地址</td>
    </tr>
    <tr>
        <td>value</td>
        <td>select参数</td>
    </tr>
</table>