fsLayui介绍(layui插件)

fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。
GitHub下载 码云下载
测试环境地址：http://fslayui.itcto.cn

为什么要使用fsLayui？

传统的开发一般需要实现增删改查功能，每个功能都需要对应一个html页面和js绑定操作。
每个操作都需要绑定事件操作，那么每个页面都需要javascript代码来实现，对于一般业务不是特别强的后台系统来说，每个页面展示基本差不多，只是请求的url地址不一致。

新增demo

  

    输入框
    

      
    
  
  

    密码框
    

      
    
    
辅助文字
  
  

    选择框
    

      
        
        北京
        上海
        广州
        深圳
        杭州
      
    
  
  

    复选框
    

      
      
      
    
  
  

    开关
    

      
    
  
  

    单选框
    

      
      
    
  
  

    文本域
    

      
    
  
  

    

      立即提交
      重置
    
  

layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

fsLayuiPlugin解决的问题？

通过引入fsLayuiPlugin js文件，快速开发datagrid增删改查操作。

支持功能

• 简单数据表格增删改查
• 树+数据表格（树基于ztree实现，点击左边树，刷新右边表格数据）
• 多数据表格(同一页面多个数据表格操作)
• tab表格(tab切换表格)
• 复杂表格增删改查
• 联动表格增删改查
• 联动下拉框(省市区级联等)
• 数据表格转义(例如：表格某个字段需要需要把代码填充中文名称)
• 文件上传功能
• layedit编辑器
• 数据字典功能

新增demo

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名称
          

            
          
        
        

          类型
          

            
            
            
          
        
        

          性别
          

            
            
          
          状态
          

            
          
        
        

          城市
          

            
            
          
          创建时间
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          区
          

            
            
          
        

        

          附件
          

            
          
          

            上传图片
          
        
        

          描述
          

            
          
        
        

        

          新增
          关闭
        
      
    
  

效果图

数据表格

新增

树+数据表格

多数据表格

联动表格

本文首发于我的博客：ITCTO技术博客