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

渲染结果

jquery easyui datagrid 远程加载数据----javascript法

猜你喜欢