EasyUI框架：ComboBox与DataGrid组件详解 - CSDN文库

需积分: 0 76 浏览量更新于2024-08-05 收藏 855KB PDF 举报

"本文档主要介绍了Web应用程序设计与开发中使用EasyUI框架的初步实践，内容涉及ComboBox和DataGrid两个关键组件的配置和操作。章节一重点讲解了ComboBox组件的应用，包括在JSP页面中通过JavaScript与后台Servlet进行交互，利用`SystemEmployeeService`接口的`initpoiticalstate`方法获取数据，并强调了表单序列化时valueField属性的重要性。valueField用于存储数据的唯一标识，而textField则展示数据显示的文字。在代码示例中，JSP页面中设置了`<input>`元素作为ComboBox的输入字段，通过jQuery EasyUI插件实现组件初始化，设置了url指向服务端处理数据的地址，同时指定了valueField为`politicalstateid`，textField为`politicalstatename`，以及自适应高度的面板。在后台，Servlet返回一个包含JSON数组的数据，包含了政治状态名称和ID对。章节二进一步探讨DataGrid组件的使用，首先介绍了在JSP页面中引入EasyUI所需的CSS和JavaScript文件，确保页面能够正确加载EasyUI库及其语言包。然后，通过HTML代码加入了DataGrid元素，设置了100%宽度和100%高度，以及0边距，以适应页面布局。在实际应用中，DataGrid用于展示和管理数据列表，可以通过类似的方式加载数据，例如通过Ajax请求从服务器获取JSON格式的数据，然后解析填充到DataGrid的行项中。通过设置valueField和textField，用户可以方便地查看和操作数据，如编辑或删除。总结来说，本文档深入浅出地展示了EasyUI在Web开发中的基本应用，让读者了解如何结合前端JavaScript和后端Java Servlet实现数据的交互和显示，是初学者和有一定经验的开发者学习EasyUI的重要参考资料。"

Web 应用程序设计与开发文档-EasyUI

第一章 EasyUI 框架使用

1.1 ComboBox 组建的使用

1、JSP 页面

<input id="poiticalstate" name=" poiticalstate "/>

2、JavaScript 操作

$("#unit").combobox({

url: 'SystemEmployeeService?caozuo=init poiticalstate ',

valueField: poiticalstateid,

textField: poiticalstatename,

panelHeight: 'auto'

});

3、Servlet 操作

从 Servlet 返回 jSon 数组：

[{"politicalstatename":"中共党员","politicalstateid":"001"},

{"politicalstatename":"共青团员","politicalstateid":"002"}]

注意：

表单序列化时，取 valueField 属性对应得值。

1.2 DataGrid 组件使用

1、JSP 页面构建

（1）导入相应的 JS、CSS 文件：

<link type="text/css" rel="stylesheet" href="<%=basePath %>css/easyui.css" />

<link type="text/css" rel="stylesheet" href="<%=basePath %>css/icon.css" />

<script type="text/javascript" src="<%=basePath %>js/jquery.min.js"></script>

<script type="text/javascript" src="<%=basePath %>js/jquery.easyui.min.js"></script>

<script type="text/javascript" src="<%=basePath %>js/easyui-lang-zh_CN.js"></script>

（2）加入 DataGrid 组件

 加入并设置: 创建JSP文件

<table id="info" class="easyui-datagrid" width="100%" style="height:100%;" border="0" cellpadding="0"

cellspacing="0" data-options=" toolbar:'#tb'">

<thead>

<tr>

<th data-options="field:'sno',width:120,align:'center'">

学

号

</th>

<th data-options="field:'name',width:120,align:'center'">

姓

名

</th>

<th data-options="field:'age',width:100,align:'center'">

年

龄

</th>

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

shkpwbdkak

粉丝: 37
资源: 299

最新资源