摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。
fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。css和js引用
GitHub下載 碼云下載
測試環境地址:http://fslayui.itcto.cn
公共css和js必須全部引用
數據表格配置 datagrid配置
table標簽 datagrid參數配置datagrid demo
表格數據請求配置,必須指定一個class樣式fsDatagrid,id和lay-filter必須一致。
屬性 | 必輸 | 默認值 | 名稱 | 描述 |
---|---|---|---|---|
id | 是 | 表格id | 如果只有一個數據表格,id最好為 fsDatagrid | |
lay-filter | 是 | 事件監聽id | 必須和表格id一致 | |
class | 是 | 樣式 | 必須有 fsDatagrid 樣式 | |
url | 是 | 請求地址 | ajax異步提交地址 | |
isPage | 否 | 0 | 是否分頁 | 1 分頁,0 不分頁 |
pageSize | 否 | 20 | 每頁數量 | 指定數據表格每頁分頁數量 |
defaultForm | 否 | form表單id | 表格查詢的前置條件,配置后,默認把此form表單當做datagrid查詢條件 | |
height | 否 | full-130 | 表格高度 | 表格高度 |
isLoad | 否 | 1 | 是否自動加載 | 1 默認加載,0 不加載(配置為0后,表格默認填充空數據,點擊刷新或者查詢才會更新數據,一般在 聯動表格 使用) |
clickRenderTable | 否 | 點擊行渲染的表格id | 點擊表格行,渲染某個table( 聯動表格 使用) | |
clickRenderTableInputs | 否 | 點擊后傳入參數 | 自定義需要傳入的參數( 聯動表格 使用) |
列配置,必須在table標簽下方定義一個 div 標簽,并且class為 fsDatagridCols
通過p標簽,定義列的屬性內容,參考layui官方配置:http://www.layui.com/doc/modules/table.html#cols
表格按鈕設置
屬性 | 必輸 | 默認值 | 名稱 | 描述 |
---|---|---|---|---|
lay-event | 是 | 事件監聽 | top:彈出窗口;submit:提交數據 | |
topUrl | 否 | 彈出窗口地址 | 事件監聽為top,此屬性必輸 | |
topWidth | 否 | 700px | 彈出窗口寬度 | |
topHeight | 否 | 400px | 彈出窗口高度 | |
isMaximize | 否 | 0 | 彈出窗口是否最大化 | 1:是, 0:否 |
topTitle | 否 | 彈出窗口標題 | ||
topMode | 否 | 彈出窗口模型 | new:新增窗口,edit:編輯窗口,readonly:只讀窗口; 新增、修改、查看共用同一個頁面使用 | |
url | 否 | 提交請求地址 | 事件監聽為submit,此屬性必輸 | |
isConfirm | 否 | 0 | 是否確認提示 | 1:是,0:否 |
confirmMsg | 否 | 是否確定操作選中的數據? | 確認提示內容 | |
inputs | 否 | 參數 | 自定義需要傳入的參數 |
inputs參數說明
此屬性主要為了傳參
把當前選中的行id傳入請求,可以配置 id:
傳入固定的指,可以配置 屬性:值 ,示例: state:1
傳入的參數和選中的列參數不一樣,可以配置 屬性:$對應值的屬性** ,示例:**uid:$id
傳入的參數取某一個輸入框的值,可以配置 屬性:#輸入框id ,示例:name:#name
需要傳多個參數直接通過 逗號 分割,示例: id:,state:1
form表單查詢條件配置只需要關注form表單id和查詢按鈕配置
按鈕屬性
屬性 | 必輸 | 默認值 | 名稱 | 描述 |
---|---|---|---|---|
function | 是 | 方法名稱 | 查詢寫固定值 query | |
tableId | 否 | fsDatagrid | datagrid表格id | 需要查詢的datagrid表格id |
通過菜單對datagrid表格增刪改查操作
按鈕屬性
屬性 | 必輸 | 默認值 | 名稱 | 描述 |
---|---|---|---|---|
function | 是 | 方法名稱 | top:彈出窗口,submit:提交數據,refresh:刷新表格,close:關閉窗口,query:查詢 | |
topUrl | 否 | 彈出窗口地址 | 事件監聽為top,此屬性必輸 | |
topWidth | 否 | 700px | 彈出窗口寬度 | |
topHeight | 否 | 400px | 彈出窗口高度 | |
isMaximize | 否 | 0 | 彈出窗口是否最大化 | 1:是, 0:否 |
topTitle | 否 | 彈出窗口標題 | ||
topMode | 否 | 彈出窗口模型 | new:新增窗口,edit:編輯窗口,readonly:只讀窗口; 新增、修改、查看共用同一個頁面使用 | |
url | 否 | 提交請求地址 | 事件監聽為submit,此屬性必輸 | |
isSelect | 否 | 是否單選 | 1:是,0:否 | |
isMutiDml | 否 | 是否多選 | 1:是,0:否 | |
isConfirm | 否 | 0 | 是否確認提示 | 1:是,0:否 |
confirmMsg | 否 | 是否確定操作選中的數據? | 確認提示內容 | |
inputs | 否 | 參數 | 自定義需要傳入的參數 | |
tableId | 否 | fsDatagrid | datagrid表格id | 需要查詢的datagrid表格id |
inputs參數說明
此屬性主要為了傳參
把當前選中的行id傳入請求,可以配置 id:
傳入固定的指,可以配置 屬性:值 ,示例: state:1
傳入的參數和選中的列參數不一樣,可以配置 屬性:$對應值的屬性** ,示例:**uid:$id
傳入的參數取某一個輸入框的值,可以配置 屬性:#輸入框id ,示例:name:#name
需要傳多個參數直接通過 逗號 分割,示例: id:,state:1
本文首發于我的博客:ITCTO技術博客
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92196.html
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云下載 測試環境地址:http://fslayui.itcto.cn 為什么要使用fsLa...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云下載 測試環境地址:http://fslayui.itcto.cn css和js引用 公...
摘要:復雜聯動表格使用點擊主表格,加載副表格數據,支持主副表格的增刪改查操作。演示地址復雜聯動表格配置和基礎聯通表格類似,在基礎上擴展一些增刪改查功能,基礎聯動表格參考復雜的聯動表格需要在基礎表格上增加配置和按鈕操作。 復雜聯動表格使用 點擊主表格,加載副表格數據,支持主、副表格的 增刪改查 操作。 演示地址:http://fslayui.itcto.cn 復雜聯動表格配置 和基礎聯通...
摘要:復雜聯動表格使用點擊主表格,加載副表格數據,支持主副表格的增刪改查操作。演示地址復雜聯動表格配置和基礎聯通表格類似,在基礎上擴展一些增刪改查功能,基礎聯動表格參考復雜的聯動表格需要在基礎表格上增加配置和按鈕操作。 復雜聯動表格使用 點擊主表格,加載副表格數據,支持主、副表格的 增刪改查 操作。 演示地址:http://fslayui.itcto.cn 復雜聯動表格配置 和基礎聯通...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數據,刷新表格等功能。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云...
閱讀 2686·2021-09-22 15:58
閱讀 2229·2019-08-29 16:06
閱讀 896·2019-08-29 14:14
閱讀 2809·2019-08-29 13:48
閱讀 2450·2019-08-28 18:01
閱讀 1494·2019-08-28 17:52
閱讀 3317·2019-08-26 14:05
閱讀 1610·2019-08-26 13:50