PHP – EasyUI DataGrid 资料取的方式介绍
前端之家收集整理的这篇文章主要介绍了
PHP – EasyUI DataGrid 资料取的方式介绍,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
EasyUI DataGrid 是一个用 Jquery 写的 DataGrid,由此可知,是一个 前端 Web UI 技术,一般大家在产生 DataGrid 比较常见的应该就是使用后台 PHP 等后台语言,来直接产生 HTML 语法,来显示 DataGrid,当要对该 DataGrid 操作时,在传递参数到后端,重新产生整各网页。 而 EasyUI DataGrid 支援两种做法,一个是,上述,后台 server 把显示的 HTML 产生好,在给前端显示。另一种是,利用 AJAX 的方式来产生,就只是单纯喂 JSON 格式资料给前端,前端接收到资料后,在自己分析资料利用 JQuery 来刷新 DataGrid 该部分的画面。 这边介绍的是第二种做法,利用 AJAX 技术来做,这样的好处,是可以把 资料层-> 控制层-> 展示层 三层独立来运作,达到我在之前 多层次架构设计前言 所讲的精神,不会像老方法,把 HTML 的产生都放在 PHP 中来产生,造成 PHP 开发人员本身,也要对 HTML 等前端技术也要了解很深才能进行开发的问题。 在来如此作法,为带来另一种好处,就是你前端的 UI 是可以更换,而后台程式却不用来大幅修改。目前支援 JSON 资料格式的 JavaScript DataGrid 有很多各,大家也可以多去参考其他的公司所提供的 DataGrid ,从中选择一个最适合的来使用。 介绍到此,接下来直接看程式码,会更加了解我上述的意思: 首先,需要先设计 HTML UI 介面,定义要显示哪些栏位,栏位的显示名称等,关于这部分的栏位定义,EasyUI DataGrid 也是有提供,使用 JavaScript 来动态定义,而我习惯用 HTML 直接定义,这样 也不复杂,后面在分工上,也比较容易来直接交给 Web 美工人员来直接操作。 这部分重点在 URL 的设定。
DataGrid2.PHP <div class="codetitle"><a style="CURSOR: pointer" data="14550" class="copybut" id="copybut14550" onclick="doCopy('code14550')"> 代码如下:
<div class="codebody" id="code14550">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<
Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<
Meta name="keywords" content="jquery,ui,easy,easyui,web">
<
Meta name="description" content="easyui help you build your web page easily!">
一條小龍 easyUI datagrid <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/icon.css"> <script type="text/javascript" src="./JS/jquery.js">
<script type="text/javascript" src="./JS/EasyUI/jquery.easyui.min.js">
一條小龍 easyUI datagrid url test
<table id="tt" class="easyui-datagrid" style="width:750px;height:300px"
url="datagrid2_getdata.
PHP" title="Load Data" pagination="true">
<tr>
<th field="UNum" width="80">UNum
<th field="STUID" width="120">User ID
<th field="Password" width="80" align="right">Password
<th field="Birthday" width="80" align="right">Birthday
<th field="Nickname" width="200">Nickname
<th field="DBSTS" width="60" align="center">DBSTS
</tr>
</table>
datagrid2_getdata.