fsLayuiPlugin联动表格使用(一)
简单联动表格使用 点击主表格,加载副表格数据,
演示地址:http://fslayuiplugin.fallsea.com/views/linkageDatagrid/index.html
联动表格配置
联动表格配置和基础表格配置一致,只是多了几个特殊的属性,基础表格配置参考:http://www.itcto.cn/layui/fsLayuiPlugin数据表格使用/
联动表格需要在基础表格上增加以下3个配置:
- clickRenderTable:点击行渲染的表格id
- clickRenderTableInputs:点击后传入参数
- isLoad:是否自动加载
联动表格demo
主表格demo
主表格需要配置 clickRenderTable,clickRenderTableInputs,isLoad,三个属性,isLoad 可以不用配置,默认为1.
<table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" clickRenderTable="fsDatagrid2" clickRenderTableInputs="funcId:$id" isLoad="1" url="/fsbus/S1023" isPage="1" height="260"></table>
<div class="fsDatagridCols">
<p type="numbers" title="#"/>
<p field="funcNo" title="功能号" width="100" sort="true"/>
<p field="funcName" title="名称" width="200"/>
<p field="funcType" title="类型" width="150" templet="#typeTpl"/>
<p field="state" title="状态" width="100" templet="#stateTpl"/>
<p field="resource" title="资源信息" width="300"/>
<p field="createdTime" title="创建时间" width="180"/>
</div>
<script type="text/html" id="typeTpl">
{{# if(d.funcType == 'c'){ }}
功能号实现类
{{# } else if(d.funcType == 's'){ }}
service实现类
{{# } else if(d.funcType == 'm'){ }}
mapper实现类
{{# } }}
</script>
<script type="text/html" id="stateTpl">
{{# if(d.state == 0){ }}
<span style="color: #c2c2c2">关闭</span>
{{# } else if(d.state == 1){ }}
<span style="color: #5FB878">启用</span>
{{# } else if(d.state == 2){ }}
<span style="color: #FF5722;">作废</span>
{{# } }}
</script>
副表格demo
副表格需要配置 isLoad 属性为 0 。
这里必须配置为0,不然会导致异步数据渲染冲突,首次加载页面显示存在问题
<table id="fsDatagrid2" class="fsDatagrid" lay-filter="fsDatagrid2" url="/fsbus/S1030" isLoad="0" height="260" isPage="0"></table>
<div class="fsDatagridCols">
<p type="numbers" title="#"/>
<p field="attribute" title="参数" width="100" sort="true"/>
<p field="name" title="名称" width="150"/>
<p field="notEmpty" title="必输" width="80" templet="#notEmptyTpl"/>
<p field="verifyType" title="验证类型" width="100"/>
<p field="value" title="值" width="100"/>
<p field="defaultValue" title="默认值" width="100"/>
<p field="minLength" title="最小长度" width="100"/>
<p field="maxLength" title="最大长度" width="100"/>
</div>
<script type="text/html" id="notEmptyTpl">
{{# if(d.notEmpty == '1'){ }}
<span style="color: #FF5722">是</span>
{{# } else{ }}
<span style="color: #c2c2c2">否</span>
{{# } }}
</script>
本文首发于我的博客:ITCTO技术博客
fsLayuiPlugin联动表格使用(一)的更多相关文章
- fsLayuiPlugin多数据表格使用
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- fsLayuiPlugin数据表格动态转义
数据表格动态转义提供一种更简洁的方式,主要解决前端laytpl模板转义的问题,对于一些简单的,例如:状态展示,我们可以通过前端编写laytpl模板来处理:对于动态的数据,通过这种静态方式是没有办法处理 ...
- fsLayuiPlugin树+数据表格使用
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- fsLayui数据表格使用
fsLayui 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环境地址:ht ...
- fsLayuiPlugin附件上传使用说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- fsLayuiPlugin数据字典使用
概述 数据字典主要解决下拉框数据填充和数据表格转义处理,一个数据字典可以多处使用. 1.多个页面下拉框使用同样的数据,改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析 ...
- 十分钟玩转 jQuery、实例大全
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
随机推荐
- Eclipse 热部署方式
1.tomcat 热部署 1.1方法一:更改 server.xml,更改为 <Context docBase="dreamlive" path="/ROOT&quo ...
- Hibernate之Query.uniqueResult()结果为数值的注意事项
在日常练习中使用Query.uniqueResult()获取查询总数量,想当然的把返回结果值直接强转成Integer类型,实现运行报错,具体代码如下: 控制台错误信息如下: 返回值为Long型,使用时 ...
- C++ const成员变量和成员函数(常成员函数)
在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. const成员变量 const 成员变量的用法和普通 const 变量的用法相似,只 ...
- python语法基础-函数-装饰器-长期维护
######################################################### # 装饰器 # 装饰器非常重要,面试Python的公司必问, # 原则:开放封闭原则 ...
- 使用Cron表达式创建定时任务
CronTriggerCronTrigger功能非常强大,是基于日历的作业调度,而SimpleTrigger是精准指定间隔,所以相比SimpleTrigger,CroTrigger更加常用.CroTr ...
- Qt 多线程QThread实现方法之一
基本思想 在主线程中,哪里需用多线程,就在哪里创建一个QThread实例: 把耗时操作封装到一个继承于QObject的子类(这里叫做工作类Worker)槽函数中: 创建QThread实例和Worker ...
- RAM子账户登录DMS对库进行管理
前言:阿里云账户是个权限很大的账户,有时候为了不让更多的人知道,但是又必须让别人管理里面某个模块的功能的时候,RAM子账户就显得很重要,所以设置子账户的权限就很有必要了,下面简单设置两种权限(dms上 ...
- 制作MACOSX 10.9Mavericks安装启动U盘教程
苹果OS X Mavericks发布了,不少朋友又开始制作系统安装U盘了.其实下面介绍的方法与之前介绍的方法可能有些不同,不过原理还是一样的.下面看看具体的操作步骤吧! 1. 首先你需要开启显示隐藏文 ...
- 数据检索|文献检索|事实检索|yandex|Title vs topic|检索技术|检索技巧|
信息检索: 信息检索原理是,将书写不规范的原始数据先存储,再通过归纳化or标准化手段进行拆分,便于用户搜索. 信息检索类型可依据数据内容进行分类,文献检索是通过输入关键字进入搜索引擎,搜索仅找到含有关 ...
- MySQL性能优化最佳实践 - 05 MySQL核心参数优化
back_log参数的作用 指定MySQL可能的TCP/IP的连接数量(一个TCP/IP连接占256k),默认是50.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花 ...