jquery easyui datagrid 遠程加載數據----javascript法

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');

渲染結果