若依框架前端页面技术总结_若依框架用到的前端技术-优快云博客

本文详细介绍了如何在Thymeleaf模板引擎中使用字典数据进行搜索框配置、列表显示、数据修改及表单校验等操作，通过具体代码示例展示了各种场景下的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.搜索框中用到字典数据时的用法：

<li>
    <p style="width: 70px;">供应性质：</p>
    <select name="supplyProp" th:with="type=${@dict.getType('supply_prop')}">
        <option value="">所有</option>
        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
    </select>
</li>

2.列表显示用到字典数据的用法：

var supplyProp=[[${@dict.getType('supply_prop')}]];

{
    field : 'supplyProp', 
    title : '供应性质',
    formatter: function(value, row, index) {
        return $.table.selectDictLabel(supplyProp, value);
    }
}

3.修改数据时需要反显的数据字典用法：

<label class="col-sm-3 control-label">供应性质：</label>
<select  class="form-control" name="supplyProp" th:with="type=${@dict.getType('supply_prop')}">
    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:selected="${dict.dictValue}==*{supplyProp}" th:value="${dict.dictValue}"></option>
</select>

4.隐藏某个数据字典列表用法：

5.表单校验：

// 表单验证
$("#form-goodsInfo-add").validate({
    onkeyup: false,
    rules:{
        rebateRate:{
            required:true,
            number:true,
            min:0
        },
        rate:{
            required:true,
            number:true,
            min:0
        }
    },
    focusCleanup: true
});
6.列表多选获取数据方式：
var rows = $.table.selectFirstColumns(); 
var code=$.table.selectColumns("id"); 
if (rows.length == 0) 
{ $.modal.alertWarning("请至少选择一条记录"); return; }

7.自定义传参：

/* 导入表结构-选择表结构-提交 */
function submitHandler() {
   var rows = $.table.selectColumns("tableName");
   if (rows.length == 0) {
             $.modal.alertWarning("请至少选择一条记录");
             return;
          }
   var data = {"tables": rows.join()};
   $.operate.save(prefix + "/importTable", data);
}