jquery easyui有三種辦法生成datagrid（資料網格），本篇專門討論javascript藉助jquey easy ui實現的方式

html部分

<main role="main" class="container">

    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new
 
 project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>
    <div class="starter-template" style="margin-left: 150px">
        <p class="lead">
            <table class="table" id="dg" style="width:1000px;height:auto;border:1px dashed blue; 
 
"></table>
        </p>
    </div>
</main>

javascript程式碼

<script>
#這一步是為了jquery easyui datagrid的datagrid生成資料來源！也是js法藉助easy ui生成資料的關鍵！！！，
#遺憾的是easyui的相關出版物大多跳過該部分，直接擺上json encode後的資料，連網上的範例也是照著官方文件避重就輕，讓人對資料生成的途經很是摸不著頭腦

    $(function(){
        function duwa()
        {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4)
                {
                    console.log(xhr.responseText);
                    return xhr.responseText;
                }
            };
            xhr.open('get','querycpc');
            xhr.send(null);
        }
#這一部分才真正和jquery easyui datagrid的設定相關！！！
        $('#dg').datagrid({
            width:500,
            scrollbarSize:0,
            fitColumns:true,
            url:'http://www.cpcandcj.com/querycpc',
            columns:[[
                {field:'id',title:'主鍵',width:'100'},
                {field:'name',title:'教練姓名',width:'100'},
                {field:'age',title:'年齡',width:'100'},
                {field:'birthday',title:'出生日期',width:'100'},
                {field:'expertin',title:'專業擅長',width:'100'},
            ]],
            loadMsg:'資料載入，請稍等.....',
            data:duwa(),#這一步是載入ajax查詢的資料，非常重要
 

        });
    })
</script>

 後臺程式碼：這裡使用了thinkphp框架的鏈式查詢，實際上並不像很多教科書上解釋的那樣，需要返回json編碼後的資料，這裡直接返回了php關聯陣列集

  function querytech_cpc()
    {
        $ret = Db::table('tech_cpc')->select();
        //return json_encode($ret);
        return $ret;
    }

thinkphp route路徑設定

Route::rule('querycpc','tools/Tools/querytech_cpc');

渲染結果