Datagrid接收JSON資料格式

最後更新：2017-08-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：desc ice 照片 numbers name time 建立時間 har themes

開打View下面的Shared建立一個視圖模版（主版頁面）
<!DOCTYPE html><html><head>    <title>Main</title>    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>     <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>    @Styles.Render("~/Content/css")    @Styles.Render("~/Content/themes/blue/css")</head><body>    <div style="padding:5px 5px 0px 5px;">        @RenderBody()    </div></body></html>



index視圖
@using App.Admin;@using App.Common;@{    ViewBag.Title = "Index";    Layout = "~/Views/Shared/_Index_Layout.cshtml";      }


<table id="List"></table><script type="text/javascript">    $(function () {        $(‘#List‘).datagrid({            url: ‘/SysSample/GetList‘,            width: $(window).width() - 10,            methord: ‘post‘,            height: $(window).height() -35,            fitColumns: true,            sortName: ‘Id‘,            sortOrder: ‘desc‘,            idField: ‘Id‘,            striped: true, //奇偶行是否區分            singleSelect: true,//單選模式            rownumbers: true,//行號            columns: [[                { field: ‘Id‘, title: ‘ID‘, width: 80 },                { field: ‘Name‘, title: ‘名稱‘, width: 120 },                { field: ‘Age‘, title: ‘年齡‘, width: 80, align: ‘right‘ },                { field: ‘Bir‘, title: ‘生日‘, width: 80, align: ‘right‘ },                { field: ‘Photo‘, title: ‘照片‘, width: 250 },                { field: ‘Note‘, title: ‘說明‘, width: 60, align: ‘center‘ },                { field: ‘CreateTime‘, title: ‘建立時間‘, width: 60, align: ‘center‘ }            ]]        });    });</script>

在SysSampleController添加GetList方法給視圖的AJAX使用

[HttpPost]
public JsonResult GetList()
{
List<SysSampleModel> list = m_BLL.GetList("");
var json = new
{
total = list.Count,
rows = (from r in list
select new SysSampleModel()
{

Id = r.Id,
Name = r.Name,
Age = r.Age,
Bir = r.Bir,
Photo = r.Photo,
Note = r.Note,
CreateTime = r.CreateTime,

}).ToArray()
};
return Json(json, JsonRequestBehavior.AllowGet);
}

其實有心的童鞋會發現下載的easyui包裡面有個demo檔案，我們開啟datagrid範例的檔案夾找到

{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

我們看到樣本中的Demo Json格式，後台必須返回符合Easyui讀取的Json格式數

Datagrid接收JSON資料格式

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More