نمایش اطلاعات JSON در ستون های Data Grid
یکشنبه 25 بهمن 1394در این مقاله می خواهیم اطلاعات JSON را در قالب Data Grid Columns به کاربر نمایش بدهیم . برای این کار از jquery.columns grid بهره می گیریم .
در این مقاله ، ما بررسی می کنیم که چگونه می توانیم داده های JSON را در یک grid در سمت client (کاربر) نشان بدهیم. ما در اینجا از jquery.columns grid استفاده خواهیم کرد که بسیار سبک است و برای استفاده نیز بسیار آسان است. برای ایجاد یک فایل نمونه ، ما یک JSON دینامیک (پویا) در سمت کاربر ایجاد می کنیم و آن را به صورت یک grid به کاربر نمایش می دهیم.
امیدواریم که این مقاله مورد پسندتان واقع شود.
استفاده از کد
در اولین مرحله ، باید فایل های مورد نیاز مان را از اینجا دانلود کنیم.
برای اضافه کردن مراجع (reference) به صفحه ی خودتان از کد های زیر استفاده کنید :
<link href="css/classic.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.columns-1.0.min.js"></script>
ایجاد یک JSON پویا(JSON dynamically)
شما می توانید به روش زیر، یک آرایه ی JSON ایجاد کنید.
var myData = new Array();
var firstNames = ["مریم ", "سارا", "علی", "احمد", "محمد", "ستایش", "صدیقه", "گلی", "مارال", "شهرزاد", "ارسلان", "امیرعلی", "نیما", "سامان", "سهند", "سام", "سمانه", "بابک"];
v var lastNames = ["عباسی", "محمدی", "آشتیانی", "احمدی", "کاشی ", "سهیلی", "خسروی", "تنکابنی", "راد", "افضلی", "صداقت", "هداوند", "محسنی", "مشایخی ", "بردبار", "موسوی", "محمودیان", "قبادی"];
var productNames = ["چای سیاه", "چای سبز", "قهوه اسپرسو", "قهوه ترک", "قهوه لاته", "موکا", "شکلات داغ", "قهوه آمریکانو", "کاپوچینو", "قهوه فرانسه", "آب پرتقال", "کیک شکلاتی "];
var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
function createData(num)
{
myData = [];
for (var i = 0; i < num; i++)
{
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["نام"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["نام خانوادگی"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["منوی سفارشات"] = productNames[productindex];
row["قیمت"] = price;
row["تعداد"] = quantity;
row["قیمت کل"] = price * quantity;
myData[i] = row;
}
}
در این تکه کد ، تابع createData یک آرایه ی JSON برای ما ایجاد خواهد کرد.
در مرحله ی بعدی ، نیاز داریم که یک جدول ایجاد کنیم و سپس این آرایه را به عنوان data source (منبع داده) به grid بدهیم .
<table id="dataGrid" class="display" width="100%"></table>
$(function ()
{
createData(25); $('#dataGrid').columns
({
data: myData
});
});
کد کامل را می توانید در زیر ببینید.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Convert JSON Data Into Data Grid Columns</title>
<link href="css/classic.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.columns-1.0.min.js"></script>
<script>
var myData = new Array();
var firstNames = ["مریم ", "سارا", "علی", "احمد", "محمد", "ستایش", "صدیقه", "گلی", "مارال", "شهرزاد", "ارسلان", "امیرعلی", "نیما", "سامان", "سهند", "سام", "سمانه", "بابک"];
var lastNames = ["عباسی", "محمدی", "آشتیانی", "احمدی", "کاشی ", "سهیلی", "خسروی", "تنکابنی", "راد", "افضلی", "صداقت", "هداوند", "محسنی", "مشایخی ", "بردبار", "موسوی", "محمودیان", "قبادی"];
var productNames = ["چای سیاه", "چای سبز", "قهوه اسپرسو", "قهوه ترک", "قهوه لاته", "موکا", "شکلات داغ", "قهوه آمریکانو", "کاپوچینو", "قهوه فرانسه", "آب پرتقال", "کیک شکلاتی "];
var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
$(function()
{
createData(25);
$('#dataGrid').columns(
{
data: myData
});
});
function createData(num)
{
myData = [];
for (var i = 0; i < num; i++)
{
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["نام"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["نام خانوادگی"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["منوی سفارشات"] = productNames[productindex];
row["قیمت"] = price;
row["تعداد"] = quantity;
row["قیمت کل"] = price * quantity;
myData[i] = row;
}
}
</script>
</head>
<body>
<table id="dataGrid" class="display" width="100%"></table>
</body>
</html>
- ASP.net
- 2k بازدید
- 4 تشکر