zoukankan      html  css  js  c++  java
  • mustache使用

    mustache模板,用于构造html页面的内容,

    前端html代码:

    <select name="itemtype" id="itemtype" class="optionlist"></select>
    <select name="business" id="business" class="optionlist"></select>
     

    前端javascript代码:

    <!-- 下拉框模板 -->
        <script type="text/x-template" id="selecttmpl">
            {{#option}}
                <option value="{{value}}">{{text}}</option>
            {{/option}}
        </script>
    $(function() {
      // 模板引擎
      var M = Mustache;

      // 获取html页面中的模板x-template的值,根据id定位
      selectmoudle = $("#selecttmpl").html();

      // 获取需要赋值的模板
      M.parse(selectmoudle);
      // 通过ajax调用后台接口获取数据  
      iniselectmoudle();
     
    }

    var iniselectmoudle = function() {
        
    "iniselectmoudle" : "1" }; Util.ajax({ url : _settings.iniselectmoudle, data : requestData, type : 'POST', success : function(response) { // 项目类型下拉
              // 根据select标签的id属性值定位然后赋值
            $('#itemtype').html(M.render(selectmoudle, { option : response.itemtypeList })); // 申报主题下
              // 根据后台接口返回的值JSONObject的String字符串类型,根据对应的key获取对应的value值,有些value值是JSONObject组成的list;
    $('#business').html(M.render(selectmoudle, { option : response.constructionpropertyList }));
              // 可以同时给多个标签赋值

              // select控件初始化,模糊搜索 /* * $(".optionlist").chosen({ disable_search : true }); */ } }); }

    后台action层业务管理层和service层业务逻辑实施层以及dao层数据访问层的restful接口的代码:

    @RestController
    @RequestMapping("/zwdtItem")
    public class AuditOnlineItemController{
        /**
         *  咨询页面初始化下拉列表
         *  @param params 请求参数
         *  @param request HTTP请求
         * @return
         */
        @RequestMapping(value = "/iniselectmoudle", method = RequestMethod.POST)
        public String iniselectmoudle(@RequestBody String params, @Context HttpServletRequest request) {
            try {
                log.info("=======开始调用iniselectmoudle接口=======");
                JSONObject jsonObject = JSONObject.parseObject(params);
                String token = jsonObject.getString("token");
                if (ZwdtConstant.SysValidateData.equals(token)) {
                    JSONObject obj = (JSONObject) jsonObject.get("params");
                    
                    // 可以根据前端ajax交互传回的参数执行判断执行不同的操作
                    String iniselectmoudle = obj.getString("iniselectmoudle");
    
                    // 获取相关数据以JSONObject组成的list形式返回前端,用于给模板select标签赋值
                    List<CodeItems> itemtypeListTemp = iCodeItemsService.listCodeItemsByCodeName("并联审批项目类型");
                    List<JSONObject> itemtypeList = new ArrayList<JSONObject>();
                    for (CodeItems c : itemtypeListTemp) {
                        JSONObject objCode = new JSONObject();
                        objCode.put("value", c.getItemValue());
                        objCode.put("pId", "0");
                        objCode.put("text", c.getItemText());
                        itemtypeList.add(objCode);
                    }
    
                    // 调用方法返回由实体类或者JSONObject/Object类组成的ArrayList
                    List<AuditSpBusiness> businessListTemp = auditOnlineConsultService.findAuditSpBusinessList();
                    List<JSONObject> businessList = new ArrayList<JSONObject>();
                    for (AuditSpBusiness auditSpBusiness : businessListTemp) {
                        JSONObject objCode = new JSONObject();
                        objCode.put("value", auditSpBusiness.getRowguid());
                        objCode.put("pId", "0");
                        objCode.put("text", auditSpBusiness.getBusinessname());
                        businessList.add(objCode);
                    }
    
                    JSONObject dataJson = new JSONObject();
                    dataJson.put("itemtypeList", itemtypeList);
                    dataJson.put("businessList", businessList);
                    return JsonUtils.zwdtRestReturn("1", "初始化下拉列表成功", dataJson.toString());
                }
                else {
                    log.info("=======结束调用iniselectmoudle接口=======");
                    return JsonUtils.zwdtRestReturn("0", "身份验证失败!", "");
                }
            }
            catch (Exception e) {
                return JsonUtils.zwdtRestReturn("0", "初始化下拉列表失败:" + e.getMessage(), "");
            }
        }      
      
      
    }

    ArrayList是Array的复杂版本,是一种动态数组;

  • 相关阅读:
    openlayers5之ol.proj坐标转换
    bootstrap模态框可拖动 --------------------- 本文来自 gisdoer 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/gisdoer/article/details/82838312?utm_source=copy
    bootstrap模态框可拖动
    leaflet实用插件整理
    面试题经常问的闭包问题
    撩课-Java每天5道面试题第15天
    撩课-Web大前端每天5道面试题-Day4
    撩课-Python-每天5道面试题-第4天
    撩课-Java每天5道面试题第14天
    撩课-Web大前端每天5道面试题-Day3
  • 原文地址:https://www.cnblogs.com/wmqiang/p/10498787.html
Copyright © 2011-2022 走看看