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

最新推荐文章于 2022-07-02 16:39:14 发布

转载最新推荐文章于 2022-07-02 16:39:14 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/saintdingspage/p/10241346.html

文章标签：

#javascript #ui #json #ViewUI

本文详细介绍了如何使用jQuery EasyUI的Datagrid组件加载数据，包括前端JavaScript代码配置及后端ThinkPHP框架数据返回过程。通过具体示例，展示了Datagrid数据源的生成方法，以及如何设置Datagrid的宽度、滚动条大小、列适配等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

渲染结果

转载于:https://www.cnblogs.com/saintdingspage/p/10241346.html