همان طور که می دانید json فرمتی برای تبادل اطلاعات بین نرم افزارهای گوناگون است .تا حدی شبیه Xml می باشد ولی از آن ساده تر است .در این مقاله نحوه قرار دادن اطلاعات درون json به داخل یک Grid از نوع JQWidget JQX را خواهید دید.

در این مقاله نحوه Bind کردن اطلاعات json به Grid را خواهید آموخت .json یک فرمت تبادل اطلاعات بین نرم افزار های مختلف است .در این فرمت اطلاعات اشیا برنامه نویسی تبدیل به متن می شوند .این متن به صورت ساده بوده و فهم آن راحت است .فرمت json به این صورت است که برای تعریف یک شی در آن از {} استفاده می کنیم .مقادیر داخل این شی به صورت کلید و مقدار هستند که با کاما ، از هم جدا می شوند.اگر نیاز باشد که این اشیا به صورت یک مجموعه ارسال شوند لازم است آنها را درون آرایه تعریف کنیم .آرایه در json توسط [] تعریف می شود و داخل این براکت اشیا مختلفی می توانند قرار گیرند.

همان طور که گفته شد json برای تبادل اطلاعات بین برنامه های مختلف استفاده میشود در Sample این مقاله هم از دیتابیس استفاده نکرده ایم بلکه دیتای مورد نیاز خود را از یک فایل json که دارای پسوند .txt. است تامین می کنیم و آنها را در grid نمایش می دهیم .

یک پروژه ASP.NET از نوع WEB FORM می سازیم و در داخل آن یک صفحه به نام Default ایجاد می کنیم .در این صفحه در قسمت head صفحه و بعد از title اسکریپت های زیر را اضافه می کنیم .

 <script src="/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="/JQXItems/jqwidgets/jqxdatatable.js"></script>
    <link href="/JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

در مرحله بعد یک اسکریپتی برای خواندن اطلاعات درون فایل jsondata.txt می نویسیم .دراین اسکریپت برای خواندن اطلاعات json درون جاوااسکریپت یک شی ایجاد می کنیم . این شی یک ویژگی به نام Url دارد که درون آن آدرس فایل  jsondata.txt را قرار می دهیم و همچنین در این شی یک فیلد datafields وجود دارد که از نوع json است و در واقع فرمت جدول grid که باید دو ستون باشد و درون header آن چه چیزی نوشته شود را نمایش می دهد.

  <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data =
            {
                datatype: "json",
                datafields: [{ "name": "AreaCode", "type": "string" }, { "name": "Revenue", "type": "number" }],
                //id: 'id',
                url: "jsonData.txt"
            };
            $("#jqxgrid").jqxGrid(
                  {
                      source: data,
                      columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
                      pageable: true,
                      filterable: true,
                      sortable: true
                  });
        });

در قسمت body صفحه هم کد زیر را نوشته ایم .

 <div id='jqxWidget' style="float: left; width: 99.9%;">
        <div id="jqxgrid"></div>
    </div>

بعد از اجرا صفحه زیر را خواهید دید.