# jquery-grid

**Repository Path**: devin-alan/jquery-grid

## Basic Information

- **Project Name**: jquery-grid
- **Description**: 基于jquery开发的一款表格组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2016-07-31
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#jquery-grid
jquery-grid动态元素插入直接使用html()方法，因此不能支持IE9以下版本的浏览器

gulp构建压缩：
```
npm install --save-dev
gulp min
```
 **数据表格属性：** 
```
url              从远程服务器请求数据的接口
params           发送服务器请求的参数，在v0.1中该参数为function,从v0.2后变为plainObject类型
method           发送请求的方式，默认为post
columns          表格列配置，里边配置表格列数组
dataType         数据类型，仅支持json
pageSize         每页加载条数
spanInterval     页码数目2*n+1
firstText        首页按钮显示的文本
preText          前一页按钮显示的文本
nextText         下一页按钮显示的文本
lastText         最后一页按钮显示的文本
footBgColor      组件分页栏的背景色
evenBgColor      偶数行的背景色
oddBgColor       奇数行的背景色
clickedBgColor   被点击行的背景色
mouseenterBgColor 鼠标经过行的背景色
fillWithEmptyRows 数据数量不足一页时是否采用空行填充表格，默认是true
pagination        是否启用分页栏，模式启用分页
pageSizeList      指定每页的页码，目前未实现
totalField        指定分页接收服务器返回总条数的字段，设置的默认字段名为total
rowsDataField     指定分页接收服务器返回行记录数据的字段，设置的默认字段名为list
pageIndexField    指定服务器接收当前请求页码的名称，设置的默认值为pageIndex
pageSizeField     指定服务器接收每页size请求的名称，设置的默认值为pageSize
```
 **列属性：** 
```
title     字符串类型      每一列显示的文本
field     字符串类型      每一页的名称对应json object的属性名
width     数字或者百分比  列的宽度
align     指示如何对齐该列的数据，可以用 'left'、'right'、'center'
render    render是单元格的格式化函数，需要两个参数 (rowData：行的记录数据。value：字段的值)
checkbox  勾选框，在版本v0.2中增加，设置checkbox: true则该列变为勾选框
```
 **方法：** 
```
load      加载并显示指定的页，一般显示第一页，如果指定参数，将按照指定的参数load数据，load加载的参数从v0.2改为plainObject
reload    reload和load的区别在，reload只会加载当前看到的页，常用于表格数据刷新
destroy   destroy用于销毁表格的自身
getSelected 获取被选中项值得数组，在v0.2版本中增加
```

 **usage:**
需要的数据样例：
```
{
    "total": 60,
    "list": [
        {
            "id": 6,
            "name": "英皇一级",
            "subjectName": "键盘",
            "methodName": "一对一",
            "description": ""
        },
        {
            "id": 7,
            "name": "钢琴二级",
            "subjectName": "键盘",
            "methodName": "一对一",
            "description": ""
        }
    ]
}
```
查看内置exmple中的demo


**v0.2更新日志**
1. params属性改为plainObject类型
例如：
```
params:{
     keyword: $("#keyword").val()
}
```
2. columns属性增加checkbox属性,以便增加行勾选功能
3. columns属性列表中的render参数位置被调整，第一个参数为该列值，第二个参数为行数

4. grid表格的load方法做修改，第二个查询参数的数据类型变为plainObject
例如：
```
$grid.grid('load', 1,{
   keyword: $("#keyword").val()
});
```
5. 增加getSelected方法，方法使用
 例如：  var arr = $("#grid").grid('getSelected');

**v0.2.1更新日志**

1. 分页栏增加每页显示多少条的选项
2. 移除插入html()方法前不必要的empty()操作

**v0.2.2更新日志**

本次更新主要是增加组件发送请求和接收数据字段的自定义配置，
以增加灵活性，以免造成后台强制改动字段名，将字段名的改动配置到前端<br/>
具体更新内容如下：
1. 新增totalField        指定分页接收服务器返回总条数的字段，设置的默认字段名为total
2. 新增rowsDataField     指定分页接收服务器返回行记录数据的字段，设置的默认字段名为list
3. 新增pageIndexField    指定服务器接收当前请求页码的名称，设置的默认值为pageIndex
4. 新增pageSizeField     指定服务器接收每页size请求的名称，设置的默认值为pageSize

## 功能
## 书名
hello world