Javascript ASPNETZERO-如何更改索引页以呈现平铺而不是表格
我目前有一个普通的ASPNETZERO索引页面，它呈现一个带有搜索功能的datatable网格。我想更改此视图，以便为网格中的每一行渲染“平铺”。我已经有了CSS/HTML来渲染瓷砖了。我基本上想重新利用下面的index.js代码来呈现我的分幅，而不是datatable网格Javascript ASPNETZERO-如何更改索引页以呈现平铺而不是表格,javascript,asp.net,asp.net-mvc,asp.net-core,aspnetboilerplate,Javascript,Asp.net,Asp.net Mvc,Asp.net Core,Aspnetboilerplate,我目前有一个普通的ASPNETZERO索引页面，它呈现一个带有搜索功能的datatable网格。我想更改此视图，以便为网格中的每一行渲染“平铺”。我已经有了CSS/HTML来渲染瓷砖了。我基本上想重新利用下面的index.js代码来呈现我的分幅，而不是datatable网格 (function () { $(function () { var _$companyTable = $('#companyTable'); var _companyService = abp.servic
(function () {
$(function () {
var _$companyTable = $('#companyTable');
var _companyService = abp.services.app.company;
var _permissions = {
create: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Create'),
edit: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Edit'),
impersonation: abp.auth.hasPermission('Pages.Tenants.Impersonation'),
};
var _createModal = new app.ModalManager({
viewUrl: abp.appPath + 'Nursing/Company/CreateModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_CreateModal.js',
modalClass: 'CreateCompanyModal'
});
var _editModal = new app.ModalManager({
viewUrl: abp.appPath + 'Nursing/Company/EditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_EditModal.js',
modalClass: 'EditCompanyModal'
});
var dataTable = _$companyTable.DataTable({
paging: true,
serverSide: true,
processing: true,
responsive: true,
listAction: {
ajaxFunction: _companyService.getCompanies,
inputFilter: function () {
return {
filter: $('#CompanyTableFilter').val()
};
}
},
columnDefs: [
{
targets: 0,
data: null,
orderable: false,
autoWidth: true,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-xs btn-primary blue',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_editModal.open({ id: data.record.id });
}
}]
}
},
{
targets: 1,
orderable: true,
autoWidth: true,
data: "companyName"
},
{
targets: 2,
orderable: true,
autoWidth: true,
data: "companyLegalName"
},
{
targets: 3,
autoWidth: true,
data: "companyTaxID"
},
{
targets: 4,
orderable: true,
autoWidth: true,
data: "currency"
}
]
});
function getCompanies() {
dataTable.ajax.reload();
}
$('#CreateNewCompanyButton').click(function (e) {
_createModal.open();
});
$('#GetCompaniesButton').click(function (e) {
e.preventDefault();
getCompanies();
});
abp.event.on('app.editCompanyModalSaved', function () {
getCompanies(true);
});
abp.event.on('app.createCompanyModalSaved', function () {
getCompanies(true);
});
$('#CompanyTableFilter').focus();
});
（函数（）{
$（函数（）{
var$companyTable=$（“#companyTable”）；
var_companyService=abp.services.app.company；
var\u权限={
create:abp.auth.hasPermission（'Pages.Tenant.Administration.Company.create'），
编辑：abp.auth.hasPermission（'Pages.Tenant.Administration.Company.edit'），
模拟：abp.auth.hasPermission（'Pages.Tenants.impersonation'），
};
var _createModal=新建app.ModalManager({
viewUrl:abp.appPath+“护理/公司/创建模式”，
scriptUrl:abp.appPath+“查看资源/区域/护理/视图/公司/_CreateModal.js”，
modalClass:“CreateCompanyModel”
});
var_editmodel=新建app.ModalManager({
viewUrl:abp.appPath+“护理/公司/编辑模式”，
scriptUrl:abp.appPath+“查看资源/区域/护理/视图/公司/_EditModal.js”，
modalClass:“EditCompanyModel”
});
var dataTable=\$companyTable.dataTable({
是的，
服务器端：是的，
处理：对，
回答：是的，
清单行动：{
ajaxFunction:_companyService.getcompanys，
inputFilter:函数（）{
返回{
筛选器：$（'#CompanyTableFilter'）.val（）
};
}
},
columnDefs：[
{
目标：0，
数据：空，
可订购：错误，
自动宽度：正确，
defaultContent:“”，
行动：{
cssClass:'btn btn xs btn主蓝'，
文本：“”+应用程序本地化（'Actions'）+“”，
项目：[{
文本：app.localize（'Edit'），
可见：函数（）{
返回_permissions.edit；
},
行动：功能（数据）{
_打开（{id:data.record.id}）；
}
}]
}
},
{
目标：1，
可订购的：是的，
自动宽度：正确，
数据：“公司名称”
},
{
目标：2，
可订购的：是的，
自动宽度：正确，
数据：“公司名称”
},
{
目标：3，
自动宽度：正确，
数据：“companyTaxID”
},
{
目标：4，
可订购的：是的，
自动宽度：正确，
数据：“货币”
}
]
});
职能（公司）{
dataTable.ajax.reload（）；
}
$（“#创建按钮”）。单击（函数（e）{
_createModal.open（）；
});
$（“#GetCompanyButton”）。单击（函数（e）{
e、 预防默认值（）；
getCompanies（）；
});
abp.event.on（'app.editCompanyDalSaved'，函数（）{
获得公司（真实）；
});
abp.event.on（'app.createCompanyDalSaved'，函数（）{
获得公司（真实）；
});
$（“#CompanyTableFilter”）.focus（）；
});
我找到了一个解决方案。我通过添加如下所示的方法更改了index.js代码。我正在使用对API方法的AJAX调用，然后使用结果来呈现平铺输出。这对我来说很有效。 如果有人发现这种方法有任何问题，请务必告诉我
function getCompanies() {
$.ajax({
type: 'GET',
url: '/api/services/app/Company/GetCompanies',
dataType: 'json',
success: function (companies) {
var _tileHtml = "";
//Iterate thru JSON list of values
$.each(companies.result.items, function (i, company) {
//Tile content start
_tileHtml = "<div class='SingleTileContent inline-block'>";
//Header
_tileHtml += "<div class='Tile-header'>";
_tileHtml += "<div class='pull-left inline-block'>";
_tileHtml += "<div class='badge badge-info'>" + company.id + "</div>";
_tileHtml += "</div>";
_tileHtml += "<div class='pull-left inline-block text-bold'> | " + company.companyName + "</div>";
_tileHtml += "</div>";
//Body start
_tileHtml += "<div class='Tile-body text-left'>";
//Body row
_tileHtml += "<div class='Tile-body-detail'>";
_tileHtml += "<label>Legal Name</label> " + company.companyLegalName + "</div>";
//Body row
_tileHtml += "<div class='Tile-body-detail'>";
_tileHtml += "<label>Tax Id</label> " + company.companyTaxID + "</div>";
//Body end
_tileHtml += "</div>";
//Buttons (footer)
_tileHtml += "<div class='Tile-buttons'>";
_tileHtml += "<a href='javascript:;' class='btn btn-xs blue btnEdit' id='EditCompanyButton'>Edit<i class='fa fa-edit'></i></a>";
_tileHtml += "</div>";
//Tile content end
_tileHtml += "</div>";
$("#TestJS2").append(_tileHtml);
});
Count = 0;
},
error: function (ex) {
abp.notify.error('Failed to retrieve companies' + ex);
}
});
}