JeeSite treeselect 自定义请求地址

JeeSite treeselect 组件封装 layer + zTree 实现树结构选择组件、支持单选多选、异步加载下级节点、支持回显选择状态。

官方提供的方法，通过修改 options.content 值来改变弹框展示内容。

但这样要求，需要存在 Select 页面才行。

这里提供另一个方法，修改 options.contentFormData.url 值，不需要 Select 页面。

具体的业务是这样的：

选择产品时，需要关联所在订单，只展示订单中的产品。

通过定义 openFuncName 回调来实现，这个回调在弹窗前调用，在里面修改弹框展示地址。

HTML 页面

<div class="col-xs-6">
    <div class="form-group">
        <label class="control-label col-sm-4" title="">
        <span class="required ">*</span> ${text('产品名称')}：<i class="fa icon-question hide"></i></label>
        <div class="col-sm-8">
        <#form:treeselect id="proCatalog" title="${text('产品选择')}"
        path="proCatalog.proCode" labelPath="proCatalog.proName"
        url="${ctx}/order/workOrder/productTreeData"
        class=" required" allowClear="true" openFuncName="proCatalogOpenCallback"/>

        </div>
    </div>
</div>

JS 脚本

function proCatalogOpenCallback(id, options) {

    if ($("#workOrderCode").val() === "") {
        js.showMessage('请选择订单！');
        return false;
    }
    options.contentFormData.url = ctx + "/order/workOrder/productTreeData?workOrder.workOrderCode="+$("#workOrderCode").val();

}

控制器

@RequestMapping(value = "productTreeData")
@RequiresUser
@ResponseBody
public List<Map<String, Object>> productTreeData(WorkOrderRecord workOrderRecord,String excludeCode, String isShowCode) {
    List<Map<String, Object>> mapList = ListUtils.newArrayList();
    List<WorkOrderRecord> list = workOrderRecordService.findList(workOrderRecord);
    for (int i = 0; i < list.size(); i++) {
        WorkOrderRecord e = list.get(i);
        Map<String, Object> map = MapUtils.newHashMap();
        map.put("id", e.getProCode());
        map.put("pId", "0");
        map.put("name", e.getProName());
        map.put("fullName", e.getProTypeName() + " " + e.getProName() + " " + e.getProSpecification());
        mapList.add(map);
    }
    return mapList;
}

查看 openFuncName 回调方法，options 对象：

{
  "type": 2,
  "maxmin": true,
  "shadeClose": true,
  "title": "产品选择",
  "area": [
    "300px",
    "400px"
  ],
  "content": "/js/tags/treeselect",
  "contentFormData": {
    "url": "/js/a/order/workOrder/productTreeData",
    "checkbox": "false",
    "chkboxType": "",
    "expandLevel": "-1",
    "selectCodes": "",
    "isReturnValue": "false",
    "fastSearch": "true"
  },
  "btn": [
    "<i class=\"fa fa-check\"></i> 确定",
    "<i class=\"fa fa-eraser\"></i> 清除",
    "<i class=\"fa fa-close\"></i> 关闭"
  ]
}

通过修改该对象属性来达到控制弹窗，其中 area 控制弹窗大小，content 弹窗地址，contentFormData 弹窗表单数据，其中contentFormData.url 为请求数据地址。

相关文章：