GridManager Vue
基於 Vue 的 GridManager 封裝, 用於便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManager API相同。
實現功能
- 寬度調整: 表格的列寬度可進行拖拽式調整
- 位置更換: 表格的列位置進行拖拽式調整
- 配置列: 可通過配置對列進行顯示隱藏轉換
- 表頭吸頂: 在表存在可視區域的情況下,表頭將一直存在於頂部
- 排序: 表格單項排序或組合排序
- 分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
- 使用者偏好記憶: 記住使用者行為,含使用者調整的列寬、列順序、列可視狀態及每頁顯示條數
- 序號: 自動生成序號列
- 全選: 自動生成全選列
- 匯出: 當前頁資料下載,和僅針對已選中的表格下載
- 右鍵選單: 常用功能在選單中可進行快捷操作
- 過濾: 通過對列進行過濾達到快速搜尋效果
API
該文件為原生GridManager的文件，vue版本除了在
columnData.textcolumnData.templatetopFullColumn.template中可以使用vue模版外，其它使用方式相同。
Demo
該示例為原生GridManager的示例，vue版本除了在
columnData.textcolumnData.templatetopFullColumn.template中可以使用vue模版外，其它使用方式相同。
Core code
開發環境
ES2015 + webpack + Vue + GridManager
安裝
npm install gridmanager-vue --save
複製程式碼專案中引用
Vue全域性元件
import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManagerVue);
複製程式碼Vue區域性元件
import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
new Vue({
el: '#app',
components: {
GridManagerVue
}
});
複製程式碼示例
<grid-manager :option="gridOption" :callback="callback" ref="grid"></grid-manager>
複製程式碼
const app = new Vue({
el: '#app',
data: {
// 表格渲染回撥函式
// query為gmOptions中配置的query
callback: function(query) {
console.log('callback => ', query);
},
// 表格
gridOption = {
// 表格唯一標識
gridManagerName: 'test-gm',
// 高度
height: '300px',
// 首次是否載入
firstLoading: false,
// 列配置
columnData: [
{
key: 'shopId',
width: '180px',
text: '店鋪id',
align: 'center'
},{
key: 'platId',
text: '平臺',
// template=> function: return dom
// 引數介紹
// platId: 當前行資料中與配置項key相同欄位的值
// row: 當前行資料
// index: 當前行所在資料中的索引值
template: (platId, row, index) => {
const span = document.createElement('span');
span.style.color = 'blue';
span.innerText = platId;
return span;
}
},{
key: 'platNick',
text: '店鋪名稱',
// template=> string dom
template: `<span style="color: red">跟據相關法規，該單元格被過濾</span>`
},{
key: 'createTime',
text: '建立時間',
},{
key: 'updateTime',
text: '更新時間',
// 表頭篩選條件, 該值由使用者操作後會將選中的值以{key: value}的形式覆蓋至query引數內。非必設項
filter: {
// 篩選條件列表, 陣列物件。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter時該引數為必設項。
option: [
{value: '1', text: 'HTML/CSS'},
{value: '2', text: 'nodeJS'},
{value: '3', text: 'javaScript'},
{value: '4', text: '前端雞湯'},
{value: '5', text: 'PM Coffee'},
{value: '6', text: '前端框架'},
{value: '7', text: '前端相關'}
],
// 篩選選中項，字串, 預設為''。 非必設項，選中的過濾條件將會覆蓋query
selected: '3',
// 否為多選, 布林值, 預設為false。非必設項
isMultiple: false
},
// template=> function: return string dom
template: updateTime => {
return `<span style="color: blue">${updateTime}</span>`;
}
},{
key: 'action',
text: '操作',
width: '100px',
align: 'center',
// template=> function: return vue template
// vue模版中將自動新增row欄位，該欄位為當前行所使用的資料
// vue模版將不允許再使用template函式中傳入的引數
template:() => {
return '<el-button size="mini" type="danger" @click="delRelation(row)">解除繫結</el-button>';
}
}
],
// 使用分頁
supportAjaxPage: true,
// 資料來源，型別: string url || data || function return[promise || string url || data]
ajax_data: (settings, params) => {
return tenantRelateShop(params);
},
// 請求失敗後事件
ajax_error: err => {
console.log(err);
},
// checkbox選擇事件
checkedAfter: rowList => {
this.selectedCheck(rowList);
},
// 每頁顯示條數
pageSize: 20
// ...更多配置請參考API
}
},
methods: {
// 解除繫結
delRelation: function(row) {
// ... 解除繫結操作
}
}
});
複製程式碼vue-class-component
使用vue-class-component時，GridManager中所使用的this指向class，而非Vue.
如果需要將this指向vue, 可以通過將GridManager的配置項寫在created內來實現。
呼叫公開方法
以下方法需要在已經存在gridManager例項的Vue環境下使用。並且使用
this.$gridManager服務需要提前通過Vue.use(GridManagerVue)將GridManagerVue註冊至全域性元件。
// 推薦使用this.$gridManager方式進行方法呼叫。
// 重新整理
this.$gridManager.refreshGrid('test-gm'); // 或 this.$refs['grid'].$el.GM('refreshGrid', 'test-gm');
// 更新查詢條件
this.$gridManager.setQuery('test-gm', {name: 'baukh'}); // 或 this.$refs['grid'].$el.GM('setQuery', 'test-gm', {name: 'baukh'});
// ...其它更多請直接訪問API
複製程式碼檢視當前版本
import GridManagerVue from 'gridmanager-vue';
console.log(GridManagerVue.version);
複製程式碼