mustache使用
2024-10-19 11:42:45
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的复杂版本,是一种动态数组;
最新文章
- [APUE]不用fcntl实现dup2函数功能
- 超棒的javascript移动触摸设备开发类库-QUOjs
- VM VirtualBox 安装 Android 4.3虚拟机完整教程
- HowTo: Linux Server Change OR Setup The Timezone
- 配置JAVA环境变量
- LightOJ 1197 Help Hanzo(区间素数筛选)
- 再探CSS 中 class 命名规范
- STM32 CANBus RAM Layout
- java对象创建过程
- NOIP2003 传染病控制
- 当开始输入文字以及完成文字输入时,变换text field的背景以及系统自带一键删除的 叉叉
- gl.TexSubImage2D 使用遇到图片翻转的问题
- Serialize a Binary Tree or a General Tree
- 软件开发项目云端All-In-One体验
- 帝国CMS系统标签e:loop调用的附加SQL条件和排序参数
- 四、xadmin自定义插件1
- java根据word模板导出word文件
- gitlab小结
- java-ActiveMQ
- RESTEasy maven使用