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技術博客