0
Aşağıdaki dizi formatı ile neredeyse 5 MB boyutunda büyük bir json dosyası var. Yaklaşık 3000 kayıt var.Basit ngTablo ile hücrelerde veri gösterilmiyor büyük JSON
Bu veriyi ön uçta görüntülemek için microsoft mvc 4 ve angular + ngTable kullanıyorum. Tüm sütunlarda aranabilir ve sıralanabilir olması gerekir. Sunucu tarafı kodu herhangi bir argüman almaz ve aşağıdaki formatta tüm 3000 kayıtları döndürür.
{
"MR": "Inact",
"EncType": null,
"ClientAlias": 111020.0,
"OrgName": "Zic",
"CharacterAlias": null,
"Account#": 30645147.0,
"MRN": null,
"PlanCode": null,
"Address": "PO Box 123456",
"City": "Richmond ",
"St": "VA",
"ZIP": 23298.0,
"ContactName": "Jonny J",
"Fax": "(111) 111-1111",
"PHONE": "pager 111-1111",
"CriticalValueNotification": null,
"ClientPracticeTesting": null,
"Doctor": "John Smith",
"BeginDate": 36395.0,
"medBeginDate": null
}
Javascript dosyası (app.js) aşağıdaki kodu içerir. Aşağıdaki açısal kodda gösterildiği gibi görünümler için ayrı bir dosyam var.
Sorunun anlaşılmasını kolaylaştırmak için, her şeyi bir pasajın altına koydum.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="../../Assets/css/justified-nav.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="../../Assets/css/ng-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-resource.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.js"></script>
<script src="../../Assets/js/lib/ng-table.min.js"></script>
<script src="../../Assets/js/app.js"></script>
</head>
<body>
<div class="container" >
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#navbar">Default</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<h1>Instructions stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet.</p>
<!--<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>-->
</div>
<div class="container" ng-controller="tableController">
<div ng-view>
<div class="row">
<table ng-table="tableParams" class="table">
<tr ng-repeat="row in $data track by $index">
<td title="'EncType'">
{{row.EncType}}
</td>
<td title="'ClientAlias'">
{{row.ClientAlias}}
</td>
<td title="'OrgName'">
{{row.OrgName}}
</td>
<td title="'CharacterAlias'">
{{row.CharacterAlias}}
</td>
<td title="'AddressCity'">
{{row.AddressCity}}
</td>
<td title="'St'">
{{row.St}}
</td>
<td title="'ZIP'">
{{row.ZIP}}
</td>
<td title="'ContactName'">
{{row.ContactName}}
</td>
<td title="'Fax'">
{{row.Fax}}
</td>
<td title="'PHONE'">
{{row.PHONE}}
</td>
<td title="'CriticalValueNotification'">
{{row.CriticalValueNotification}}
</td>
<td title="'Doctor'">
{{row.Doctor}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div><!--container-->
</body>
</html>
javascript kontrolör fonksiyonunda kodlanmış veri olunca, masa arama olmadan iyi görüntüler ve işlevselliği sıralamak şöyle
var flexTable = angular.module("flexTable", ["ngRoute", "ngTable", "ngResource"]);
flexTable.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: '../../about.html',
controller: 'tableController'
})
.when('/contact', {
templateUrl: '../../contact.html',
controller: 'tableController'
})
.when('/', {
templateUrl: '../../table.html',
controller: 'tableController'
})
.when('/table', {
templateUrl: '../../table.html',
controller: 'tableController'
})
.otherwise({
redirectTo: '/table'
});
}]);
flexTable.controller('tableController',['$scope', '$resource' ,'ngTableParams', function ($scope, $resource,ngTableParams) {
var data = '';
var api = $resource("/Home/GetData")
$scope.tableParams = new ngTableParams({}, {
getData: function (params) {
var varApiGet = api.get(params.url()).$promise.then(function (data) {
params.total(data.inlineCount);
return data.results;
});
return varApiGet;
}
});
}]);
html sayfası görünüyor. Veriler kodda gösterildiği gibi ajax çağrısı üzerinden geldiğimde, hiçbir veri göstermez. sadece tablo başlığı.
Bu konuda herkesin sahip olduğu soruları yanıtlayabilirim.
sayesinde Paras
Herhangi bir yardım takdir.
DÜZENLEME İşte
benim için çalıştı kontrolör kodudur. Ayrıca, sıralama ve filtreler için bazı ekstra kodlar ekledim.
flexTable.controller('tableController', ['$scope', '$http', 'ngTableParams', '$filter', '$log'
, function ($scope, $http, ngTableParams, $filter, $log) { //
$http.get('/Home/GetData')
.success(function (data, status) {
$scope.data = data;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
OrganizationName: 'asc' // initial sorting
}
}
, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filterData = params.filter() ?
$filter('filter')($scope.data, params.filter()) :
$scope.data;
var orderedData = params.sorting() ?
$filter('orderBy')(filterData, params.orderBy()) :
filterData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
}
);
});
}]);
Aşağıdaki hatayı şimdi alıyorum. TypeError: undefined olan un 'inlineCount' özelliğini app.js adresinde okuyamazsınız: anered.js: 49 angular.js: 15757 adresinde m. $ Eval (angular.js: 17025) m. $ Digest (angular.js: 16841) . m $ uygulamak (angularjs: 17133) g de (angularjs: 11454) x en (angularjs: 11652) XMLHttpRequest.v.onload de (angularjs: 11593) – pparas
oh üzgünüm Kodunuzu denediğimde $ kaynağı yerine $ http kullanıyordum ve sonuç aynı değil. "Console.log (reposnse)" veya kodunuzda "console.log (data)" yazabilir misiniz? – Lulylulu
konsolu.log (veri) aşağıdaki {0: "[", 1: " ", 2: "↵", 3: "", 4: "", 5: "{", 6: " ile büyük bir nesne verir. ", 7:" ↵ ", 8:" ", 9:" ", 10:" ", 11:" ", 12:" "", 13: "M", 14: "R", 15: "" ", 16:": ", 17:" ", 18:" "", 19: "P", 20: "T", 21: "" ", 22:", ", 23:" ... .. – pparas