showGrid是作者自己封装的一款非表格展示插件,支持分页展示,数据回显,列表展示等。
项目地址:https://gitee.com/doc_wei01_admin/skyeye
插件使用方法:
showGrid({
id: "showForm",//id 加载模块展示的位置
url: reqBasePath "icon001",//请求url
params: {},//参数
pagination: true,//是否分页,默认不分页
pagesize: 10,//页显示,默认10
pageindex: 1,//第几页,默认1
pageClickBefore: function(index){},//点击分页之前的回调函数
pageClickAfter: function(index){},//点击分页之后的回调函数
ajaxSendBefore:function(json){},//ajax请求之前的回调函数
template: getFileContent('tpl/syseveicon/icon-item.tpl'),//模板
ajaxSendLoadBefore: function(hdb){},//ajax请求之后的加载数据之前的回调函数
options: {'click .del':function(index, row){}},//按钮监听事件
ajaxSendAfter:function(json){}//ajax请求之后的回调函数
});
该模板插件依赖于 Handlebars.
下拉框使用案例:
模板文件(名称:select-option.tpl)
<option value="">全部</option>
{{#each rows}}
<option value="{{id}}">{{name}}</option>
{{/each}}
js内容
showGrid({
id: "sysFirstType",
url: reqBasePath "sysevewintype012",
params: {},
pagination: false,
template: getFileContent('tpl/template/select-option.tpl'),
ajaxSendLoadBefore: function(hdb){
},
ajaxSendAfter:function(json){
form.render('select');
}
});
案例效果图:
下拉菜单的使用:
系统图标展示的使用:
应用商店的使用:
系统背景设置的使用:
插件的好处:摆脱了大量繁重的代码,使开发更具效率,更加容易维护。
项目交流:
QQ群 | 公众号 |
---|---|
![]() | ![]() |