fsLayuiPlugin数据表格动态转义

数据表格动态转义提供一种更简洁的方式，主要解决前端 laytpl模板转义的问题，对于一些简单的，例如：状态展现，咱们能够经过前端编写 laytpl模板来处理；对于动态的数据，经过这种静态方式是没有办法处理。只能经过ajax异步请求后，再去转义处理。
把这里处理方式提供统一的api，只须要配置数据字典，前端简单的配置一下就能实现转义功能。

演示地址：http://fslayui.itcto.cn

特殊说明

动态转义依赖 数据字典，必须在 layui.js 后面引入数据字典文件 /plugins/frame/js/fsDict.js , 数据字典使用说明

<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>

动态转义

只须要在表格列中，配置数据字典信息 dict="city"

<p field="city" title="城市" width="100" dict="city"/>

数据表格转义展现不一样的样式

若是表格须要对不一样的信息展现不一样的样式，在数据 data中，定义 style或 css,能够经过此方式对不一样的数据进行不一样样式展现

普通转义

静态转义须要配置解析模板id templet和模板实现 script。
若是选择项比较多或者多个地方都须要使用，那么久比较繁琐，调整一个，每一个都须要修改，这种模式只能适合处理一些比较简单的或者基本上不会进行改变的。

• 表格列配置templet

<div class="fsDatagridCols">
  <p field="city" title="城市" width="100" templet="#cityTpl"/>
</div>

• 解析模板配置

<script type="text/html" id="cityTpl">
  {{# if(d.city == '0'){ }}
    北京
  {{# } else if(d.city == '1'){ }}
    上海
  {{# } else if(d.city == '2'){ }}
    广州
  {{# } else if(d.city == '3'){ }}
    深圳
  {{# } else if(d.city == '4'){ }}
    杭州
  {{#  } }}
</script>

本文首发于个人博客： ITCTO技术博客