skyeye项目-showGrid插件的使用

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)


{{#each rows}}
    
{{/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');
    }
});

案例效果图:

下拉菜单的使用:

skyeye项目-showGrid插件的使用_第1张图片

系统图标展示的使用:

skyeye项目-showGrid插件的使用_第2张图片

应用商店的使用:

skyeye项目-showGrid插件的使用_第3张图片

系统背景设置的使用:

skyeye项目-showGrid插件的使用_第4张图片

插件的好处:摆脱了大量繁重的代码,使开发更具效率,更加容易维护。

 项目交流:

skyeye&微服务

QQ群 公众号
skyeye项目-showGrid插件的使用_第5张图片 skyeye项目-showGrid插件的使用_第6张图片

你可能感兴趣的:(Javascript,JS组件)