jQuery接收后台返回的数据

jQuery
可以直接接受，后台返回的数据

Controller方法
需要转换为JSONString

List<AssayItemClassExt> assayItemClassExtList = assayItemClassWebService.selectAllList();
model.addAttribute("assayItemClassExtList", JSON.toJSONString(assayItemClassExtList));

前台接收

var jsonString = '${assayItemClassExtList}';

示例代码

function autoCheckboxTree() {// 获取JSONvar jsonString = '${assayItemClassExtList}';var jsonObject = $.parseJSON(jsonString);// 数据源var sourceList = [];// 解析JSONvar tree = $("<div class='tree'></div>");for (var i = 0; i < jsonObject.length; i++) {var json = jsonObject[i];var tier = json.tier;if (tier == '1') {var treeModel = "<div class='treeModel'></div>"var treeOne = "<div class='treeDivStyle treeOneStyle'>" +"<div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";tree.append(treeModel);tree.children("div[class='treeModel']").last().append(treeOne);var control = tree.children("div[class='treeModel']").last().children("div[class='treeDivStyle treeOneStyle']").last().children("div[class='childrenOneDivStyle']");control.find('a').html(json.name);control.find('a').attr('title', json.name);control.find('a').val(json.id);}if (tier == '2') {var treeChildrenModel = "<div class='treeChildrenModel'>";var treeTwo = "<div class='treeDivStyle treeTwoStyle'>" +"<div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";tree.children("div[class='treeModel']").last().append(treeChildrenModel);tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().append(treeTwo);var control = tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().children("div[class='treeDivStyle treeTwoStyle']").last().children("div[class='childrenOneDivStyle']");control.find('a').html(json.name);control.find('a').attr('title', json.name);control.find('a').val(json.id);}if (tier == '3') {var treeThree = "<div class='treeDivStyle treeThreeStyle'><div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().append(treeThree);var control = tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().children("div[class='treeDivStyle treeThreeStyle']").last().children("div[class='childrenOneDivStyle']");control.find('a').html(json.name);control.find('a').attr('title', json.name);control.find('a').val(json.id);sourceList.push(json.name);}}var autoInput = "<input class='autoInputStyle' placeholder='模糊搜索'></input>";var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +"<button class='buttonTreeStyle confirmTree'>确认</button>" +"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";$('.treeSelect').append(autoInput).append(tree).append(controlTree);// 监听$('.treeSelect').children("input[class='autoInputStyle']").bind('input propertychange', function () {var value = $('.treeSelect').children("input[class='autoInputStyle']").val();if (value == '') {$('.tree').children("div[class='treeModel']").children("div[class='treeChildrenModel']").children('div').css('display', 'none');} else {var autoList = [];for (var i = 0; i < sourceList.length; i++) {var name = sourceList[i];var int = name.indexOf(value);if (int >= 0) {autoList.push(name);}}$('.tree').children("div[class='treeModel']").children("div[class='treeChildrenModel']").children('div').css('display', 'none');$('.tree').find("div[class='treeDivStyle treeThreeStyle']").find('div').find('a').each(function () {var name = $(this).text();for (var i = 0; i < autoList.length; i++) {var itemName = autoList[i];if (name == itemName) {$(this).parent().parent().css('display', '');$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").css('display', '');}}})}});
}

jQuery接收后台返回的数据相关推荐

ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
对后台返回的数据进行评分排序、时间排序！
导读:对后台返回的数据进行评分排序,时间排序,可以倒序,可以正序. 按照评分排序正序 qualityScoreSort(){this.tableData0.sort((a, b) => {re ...
（配置消息转换器）解决后台返回json数据到前台时页面时中文显示乱码问题
(配置消息转换器)解决后台返回json数据到前台时页面时中文显示乱码问题 SpringMVC.xml中加 <mvc:annotati ...
使用Blob对象接收后台返回的图片流并展示到前端页面
使用Blob对象接收后台返回的图片流并展示到前端页面一.效果图二.主要代码一.效果图二.主要代码 export function 接口(params) {return request({url ...
javascript下载文件几种方式，接收后台返回流下载或直接下载文件
目录 1 javascript下载文件7中方式 1.1 window.location.href下载 1.2 window.location下载 1.3 iframe下载 1.4 form表单的形式下 ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
html 下拉列表返回值,jquery 根据后台返回值来选中下拉框 option 值
前景:下拉列表和要选中的下拉项都是通过后台传过来的本人用字符串拼接很low的方法实现: 一给下拉框加一个默认的option 放在第一个类似于"无"或者"请选择&quo ...
接收后台返回的文件流或 base64 后下载打印 pdf 功能
后台正常返回的流 //dataResult.data是后台返回的流 let pdfUrl = window.URL.createObjectURL(new Blob([dataResult.data] ...
Ajax Get请求获取后台返回的数据
/* * Ajax 对象的成员 * 属性: responseText:以字符串形式接受返回的数据 * readyState: * 0:刚创建ajax对象 * 1:已经调用open方法 * 2:已经调用 ...

jQuery接收后台返回的数据

jQuery接收后台返回的数据相关推荐

最新文章

热门文章