fsLayui快速开始

摘要：是一个基于的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置实现数据请求，减少前端重复开发的工作。注意这里一定要修改为自己项目的配置。列表页列表页支持通过表单传参查询数据，刷新表格等功能。

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

修改配置文件 plugins/frame/js/fsConfig.js

项目中需要调用到的常量、变量修改，根据项目的实际情况来配置。  
注意：这里一定要修改为自己项目的配置。

fsConfig["global"] = {
  "servletUrl":"https://fs.fallsea.com", //异步请求地址,本地工程可以不填
  "loginUrl" : "/login", //登录url
  "uploadUrl" : "https://fs.fallsea.com/upload", //上传附件url
  "uploadHtmlUrl" : "/plugins/frame/views/upload.html", //上传附件html地址，默认/plugins/frame/views/upload.html
  "loadDataType":"1",//加载数据类型，1：是，0：否，默认0  （编辑或查看是否取缓存数据）
  "result" : { //响应结果配置
    "statusName": "errorNo", //数据状态的字段名称，默认：errorNo
    "msgName": "errorInfo", //状态信息的字段名称，默认：errorInfo
    "dataName" : "results.data", //数据列表的字段名称，默认：results.data
  },
  "page" : { //分页配置
      "request": {//请求配置
      "pageName": "pageNum", //页码的参数名称，默认：pageNum
      "limitName": "pageSize" //每页数据量的参数名，默认：pageSize
    },
    "response": {//响应配置
      "countName": "results.data.total", //数据总数的字段名称，默认：results.data.total
      "dataName" : "results.data", //数据列表的字段名称，默认：results.data
      "dataNamePage": "results.data.list" //分页数据列表的字段名称，默认：results.data.list
    }//,
//  "limit":10,//每页分页数量。默认20
//  "limits":[10,20,30,50,100]//每页数据选择项，默认[10,20,30,50,100]
  }
};

拓展form表单验证规则（自定义的表单验证规则）

fsConfig["verify"] = {
  /**
   * 对比两个值相等
   */
  "equals": function(value, item){ //value：表单的值、item：表单的DOM对象
    var equalsId = $(item).attr("equalsId");
    if(_.isEmpty(equalsId)){
      return "未配置对比id";
    }
    var value2 = $("#"+equalsId).val();

    if(!_.eq(value,value2))
    {
      var equalsMsg = $(item).attr("equalsMsg");
      if(_.isEmpty(equalsMsg))
      {
          equalsMsg = "值不相等";
      }
      return equalsMsg;
    }
  },
  /**
   * 用户名验证
   */
  "username": [
      /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){2,19}$/,
      "用户名格式不正确!"
  ],
  /**
   * 最小、最大长度判断
   */
  "length": function(value, item){ //value：表单的值、item：表单的DOM对象
    var minLength = $(item).attr("minLength");//最小长度
    var maxLength = $(item).attr("maxLength");//最大长度
    if(!_.isEmpty(minLength) && !_.eq("0",minLength) && _.gt(minLength,value.length)){
        return "输入内容小于最小值:"+minLength;
    }
    if(!_.isEmpty(maxLength) && !_.eq("0",maxLength) && _.gt(value.length,maxLength)){
        return "输入内容大于最小值:"+maxLength;
    }
  }
};

页面开发只需要引入基础的js和css样式，配置form表单或table表格，通过配置快速实现一个增删改查功能。

列表页支持通过form表单传参查询table数据，刷新表格等功能。  
表格详细配置请参考：fsLayuiPlugin数据表格使用

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  

    
fsLayuiPlugin
  

  

    

      
      

        

          案例
          

            
首页
            
数据表格
            
树+表格
            
多数据表格
            
tab数据表格
            
复杂数据表格
            
联动数据表格
            
联动数据表格(复杂)
          
        
      
    
  

  

    

      

        

          

            

              

                

                  id：
                  

                    
                  
                
                

                  名称：
                  

                    
                  
                
                

                  时间：
                  

                    
                  
                
                

                  

                    查询
                  
                
              
            
          
        
        

         

           

             
               新增
             
             
               删除
             
             
               ဂ刷新
             
           
           

             

             

                

                

                

                

                

                

                

                

                

                

              

              

              
              
            
          

        

      
    
  

  

    
    ©2017 www.fallsea.com
  

菜单赋予强大的功能，通过简单的配置，快速达到需要的效果。  
例如:

弹出一个新的窗口

关闭窗口

查询talbe

提交数据(确认提示按钮)

选择table

等...，
菜单信息配置请参考：菜单配置说明

function="top" 描述弹出窗口

topUrl="add.html" 指定打开

topWidth="700px" 弹出窗口宽度

topHeight="500px" 弹出窗口高度

topTitle="新增demo" 弹出窗口标题

  新增

function="top" 描述弹出窗口

topUrl="edit.html" 指定打开

topWidth="700px" 弹出窗口宽度

topHeight="500px" 弹出窗口高度

topTitle="编辑demo" 弹出窗口标题

isSelect="1" 必须单选

inputs="id:" 选中的参数信息

  编辑

function="submit" 描述提交数据

url="/fsbus/1002" 提交的url地址

isSelect="1" 必须单选

isConfirm="1" 弹出确认提示

confirmMsg="是否确定删除选中的数据？" 自定义确认提升内容

inputs="id:" 提交的参数信息

  删除

function="refresh" 描述刷新表格

  ဂ刷新

新增页面可以直接配置一个url提交地址，自动把form表单数据提交到后台，提交成功后，自动关闭弹出的窗口，刷新table表格数据：fsLayuiPlugin数据表格弹出form表单说明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名称
          

            
          
        
        

          类型
          

            
            
            
          
        
        

          性别
          

            
            
          
          状态
          

            
          
        
        

          城市
          

            
            
          
          创建时间
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          区
          

            
            
          
        

        

          附件
          

            
          
          

            上传图片
          
        
        

          描述
          

            
          
        
        

        

          新增
          关闭
        
      
    
  

编辑页面需要配置一个加载当个数据的地址，配置后自动一步查询数据和填充数据；   
然后配置一个url提交地址，自动把form表单数据提交到后台，提交成功后，自动关闭弹出的窗口，刷新table表格数据：fsLayuiPlugin数据表格弹出form表单说明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名称
          

            
          
        
        

          类型
          

            
            
            
          
        
        

          性别
          

            
            
          
          状态
          

            
          
        
        

          城市
          

            
            
          
          创建时间
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          区
          

            
            
          
        

        

          附件
          

            
          
          

            上传图片
          
        
        

          描述
          

            
          
        
        

        

          编辑
          关闭
        
      
    
  

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