JQueryEasyUI datagrid框架快速入门与基本应用

79 浏览量更新于2024-08-31 收藏 74KB PDF 举报

"这篇教程主要介绍了JQueryEasyUI框架中的datagrid组件的基本使用方法，强调了在处理Json数据时后台和前台的重要性，并提供了相关的HTML和JavaScript代码示例。" JQueryEasyUI是一个基于jQuery的前端开发框架，它提供了一系列易于使用的组件，如datagrid，帮助开发者快速构建用户界面。在本文中，我们将探讨datagrid框架的基础应用，特别是如何配置和使用它来展示数据。首先，要使用JQueryEasyUI的datagrid，我们需要引入相应的CSS和JS文件。在提供的代码段中，可以看到引入了以下几部分： 1. `easyui.css`：这是EasyUI的基础样式文件，提供了默认的主题和布局样式。 2. `icon.css`：包含EasyUI的图标样式，用于美化界面元素。 3. `jquery-1.8.0.min.js`：jQuery的核心库，EasyUI依赖于jQuery进行DOM操作和事件处理。 4. `jquery.easyui.min.js`：EasyUI的主要JavaScript库，包含了所有组件的功能。 5. `easyui-lang-zh_CN.js`：EasyUI的中文语言包，用于设置组件的提示和文本。在HTML结构中，创建一个使用EasyUI布局的`<body>`，其中包含north、south和east三个区域。这些区域可以通过data-options属性进行配置，例如设置标题、是否可分割等。对于datagrid本身，虽然示例代码中没有直接展示，但通常我们会在页面中定义一个`<table>`元素，并为其添加data-options属性，来指定datagrid的配置。例如，可以设置列定义、数据源、加载方式等。数据源通常通过JSON格式从后台服务器获取，前端通过Ajax请求加载。在后台，你需要准备一个返回Json数据的接口。Json数据应按照datagrid所需的格式组织，包括字段名（field）和标题（title）。例如： ```json [ { "id": "1", "name": "Item 1", "price": "10.99" }, { "id": "2", "name": "Item 2", "price": "19.99" } ] ``` 在前端，使用jQuery的`$.ajax`或`$.getJSON`方法发起请求，将返回的Json数据传递给datagrid的`loadData`或`reload`方法。例如： ```javascript $.ajax({ url: 'your/api/url', type: 'GET', dataType: 'json', success: function(data) { $('#datagridId').datagrid('loadData', data); }, error: function() { // 处理错误情况 } }); ``` 此外，datagrid还支持多种功能，如排序、过滤、分页等，可以通过设置data-options实现。例如，可以添加`pagination: true`来启用分页，或者通过`columns`定义列的可排序性。 JQueryEasyUI的datagrid组件为开发者提供了一种便捷的方式来展示和操作表格数据。理解和熟练使用这个框架，能够极大地提升前端开发效率，但同时需要注意JSON数据格式的正确性和前后端数据交互的细节。在实际项目中，根据需求灵活配置和扩展datagrid，可以打造出功能丰富的数据展示和管理界面。

JQueryEasyUI datagrid框架的基本使用框架的基本使用

今天说说这个datagrid框架的基本使用，这个框架一直以来都是大家比较头疼的框架，尤其是Json数据的拼接，后台前台都很

重要，使用这个框架，最重要的是仔细：

无需废话，上代码了：

代码如下:

<!–easyui最全的样式包也可单独引用你想使用的样式包–>

<!–easyui自带图片样式包，也可自行添加–>

<!–我使用的是easyui 1.3.2，基于jquery-1.8.0–>

<!–easyui的js包–>

<!–easyui的中文语言包，默认是英文–>

</head>

</div>

</div>

</div>

</div>

<div data-options=”region:’center’,title:’center title'” href=”HTMLPage.htm” style=”padding: 5px;

background: #eee; overflow: hidden;”><!–这里指向了一个htm页–>

</div>

</body>

</html>

HTMLPage.htm代码：

代码如下:

//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可

//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架

$(function () {

$(“#dg”).datagrid({

url: “GetJson.ashx”, //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以

demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项

title: “数据展示表格”,

iconCls: “icon-add”,

fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小

//toolbar设置表格顶部的工具栏，以数组形式设置

idField: ‘id’, //标识列，一般设为id，可能会区分大小写，大家注意一下

loadMsg: “正在努力为您加载数据”, //加载数据时向用户展示的语句

pagination: true, //显示最下端的分页工具栏

rownumbers: true, //显示行数 1，2，3，4…

pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值

pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据

//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的API

sortName: “name”, //初始化表格时依据的排序字段必须和数据库中的字段名称相同

sortOrder: “asc”, //正序

columns: [[

{ field: ‘code’, title: ‘Code’, width: 100 },

{ field: ‘name’, title: ‘Name’, width: 100 ,sortable:true},//sortable:true点击该列的时候可以改变升降序

{ field: ‘addr’, title: ‘addr’, width: 100,

//这里可以添加这样一个方法，使其显示数据得到改变

// formatter: function (value, row, index) {

// if (value == “0”) {

// return “普通角色”;

// } else {

// return “特殊角色”;

// }

}

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38548704

粉丝: 3
资源: 931

JQueryEasyUI datagrid框架快速入门与基本应用

jquery easyui datagrid demo

JqueryEasyUI DataGrid例子

JQueryEasyUI datagrid框架的进阶使用

jQuery EasyUI datagrid 使用指南

jquery easyui datagrid 教程

jquery easyui datagrid demo 详解

jquery easyui DataGrid简单示例

jQuery Easyui datagrid/treegrid 清空数据

jQuery easyui datagrid动态查询数据实例讲解

jQuery EasyUI DataGrid使用教程与实例解析

最新资源