easyui加载后台数据笔记

最新推荐文章于 2022-05-07 22:17:23 发布

月疯

最新推荐文章于 2022-05-07 22:17:23 发布

阅读量603

点赞数

分类专栏：【easyUI】

【easyUI】专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI插件加载本地数据和远程数据，包括直接加载本地JSON文件、通过JS加载数据及使用AJAX请求后台数据的方法。同时，提供了具体的代码示例，帮助开发者快速上手。

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

一、直接加载本地数据

<table class="easyui-datagrid" style="width:400px;height:250px"
       data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
   ……
</table>

这里的data-options里有url的参数，可以换为后台url地址，而后台只要返回一个符合要求的json格式的数据过来就可以了。这里的json格式可以看看官网里的要求格式。

二、使用js来加载数据：

<table id="dg"></table>...

$('#dg').datagrid({
   url:'datagrid_data.json',
   columns:[[
       {field:'code',title:'Code',width:100},
       {field:'name',title:'Name',width:100},
       {field:'price',title:'Price',width:100,align:'right'}
   ]]
});

在url里写好后台url的路径就可以了，后台同样是返回一个json给页面。

就是使用按钮点击提交

可以用form表单提交, action指定后台确定的url，

要么你可以在js中，取得想要传递给后台的数据，写一个$.post或者$.ajax等方法去将数据传递给后台去处理。

三、ajax请求后台数据模板：

$.ajax({
    type: 'post',
    url: 'url', // this is the url for backend java program
    data: {'data_post': data_post}, // the data you want to post to backend.
    success: function(result){
        alert('success');
    }
})

注释：

EasyUI每一个插件都有一个URL参数

根据EasyUI要求返回指定的Json数据！