skyeye项目-showGrid插件的使用

Bertha 。 2024-04-17 17:16 58阅读 0赞

> 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');
        }
    });

### 案例效果图： ###

下拉菜单的使用：

![format_png][]

系统图标展示的使用：

![format_png 1][]

应用商店的使用：

![format_png 2][]

系统背景设置的使用：

![format_png 3][]

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

项目交流：

![skyeye&微服务][skyeye]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NRHRGQ2toOUlDN3FtaWFpY1JUa1MzMkpqN05KTjBnRFlOdkl1dXBMaWJWaWFHaWNpYnppYThQR0hXeGY2WmxSOEpQS3B4R1UyUWRxZmNRRmNTNW0zTGpMYTRIZHcvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NRHRGQ2toOUlDN3FtaWFpY1JUa1MzMkpqN05KTjBnRFlOTXphZlpFQ3NVY2ozS3U1MkJpYmFSM2lhUDJTTjBhUUNyMEpUVzY1anpueXE2SHRvd29HTkVqZWcvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NRHRGQ2toOUlDN3FtaWFpY1JUa1MzMkpqN05KTjBnRFlOWDNpYWlhRm9ETklLaWF2RGhxdWliVlkzRHY3Z0hiSjM1VGljZkRQSEFBMzA2V3VhbXZZaGlhN1lpYjdpYVEvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NRHRGQ2toOUlDN3FtaWFpY1JUa1MzMkpqN05KTjBnRFlOUGNnRlUwbjVaaWFMeTNXdTFieFJlaWFNU1RpYjRrU1psSkRGVmJxWk1CdXpsb0VpY2R5a3F2eTRkUS82NDA_d3hfZm10PXBuZyZ0cD13ZWJwJnd4ZnJvbT01Jnd4X2xhenk9MSZ3eF9jbz0x?x-oss-process=image/format,png
[skyeye]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9wdWIuaWRxcWltZy5jb20vd3BhL2ltYWdlcy9ncm91cC5wbmc?x-oss-process=image/format,png