我试图动态地呈现我从SQL中提取的值,如下所示:
转换成类似下面这样的东西:
我已经放置了HTML和CSS,并且我正在使用$.each来实现,但是我似乎不能填充视图树的内部:
编辑:
下面是我的脚本:
AjaxGet('GetUserAppFeatures', { "uid": userid }, false, true)
.success(function (result) {
$.each(result.model, function (val) {
var li = $('<li></li>');
li.append('<span class="caret">' + result.model[val].AppName + '</span> <input type="checkbox" id="chkApp' + result.model[val].AppId + '">');
var ul = $('<ul class="nested"></ul>');
$.each(result.model[val], function (index) {
ul.append('<li>' + result.model[val].FeatureName[index] + '</li> <input type="checkbox" id="chkApp' + result.model[val].FeatureId[index] + '">');
li.append(ul);
});
treeview.append(li);
});
});
发布于 2020-05-27 05:16:23
对于这种类型的数据,您需要进行分组。
var yourData = [
{Name : "Forms", value : "Request"},
{Name : "Forms", value : "Report"},
{Name : "Forms", value : "Password"},
{Name : "Energy", value : "Report"},
{Name : "Energy", value : "CUstomer Multiplier"},
{Name : "Energy", value : "Product Feedback"},
];
Renderdata();
function Renderdata(){
var data = groupBy(yourData,"Name");
var html = '';
for(var i= 0 ; i < data.length; i++){
html += "<div>"+data[i][0].Name+" </div>"+"<ul>";
for(var j= 0 ; j < data[i].length; j++){
html += "<li>"+data[i][j].value+"</li>";
}
html += "</ul>";
}
$('#div').html(html);
}
function groupBy(collection, property) {
var i = 0, val, index,
values = [], result = [];
for (; i < collection.length; i++) {
val = collection[i][property];
index = values.indexOf(val);
if (index > -1)
result[index].push(collection[i]);
else {
values.push(val);
result.push([collection[i]]);
}
}
return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
发布于 2020-05-27 04:51:32
也许您需要一个中间步骤来构造一个数组,该数组对您拥有的第二个图像进行建模。类似于:
// Do this before $.each()
var sql_data = {
Forms: [],
Energy: []
};
// Inside of $.each() do something like this:
sql_data[col_1].push(col_2);
其中"col_1“和"col_2”分别是数据中的第一列和第二列。然后,您可以使用该"sql_data“对象来创建所需的超文本标记语言。
https://stackoverflow.com/questions/62035612
复制相似问题