框架怎么与mysql交互_easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）...

[导读]本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属性，还有与之相关的dialog(对话窗)和texbobox(文本框)的一些常用属性，希望对读者有帮助。

easyui框架--本篇学习主要是　easyui中的datagrid(数据表格)框架。

本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属性，还有与之相关的dialog(对话窗)和texbobox(文本框)的一些常用属性，希望对读者有帮助。

本篇主要分为两个部分讲解:

① 前端PHP代码编写--框架搭建与数据调用

② 数据库的数据内容与后台数据连接，后台数据传输到前台

以下所有代码HBuider中建立PHP文件实施。(前提php文件可以正常使用)

1、GIF效果图

图片：↓↓↓↓↓↓↓↓↓↓

图 1.1 在HBuider中通过建立PHP文件使用easyui框架中的datagrid(数据表格)

图片：↓↓↓↓↓↓↓↓↓↓

图 1.1 通过点击datagrid(数据表格)中的每一列显示出dialog(对话窗)--->>>对话框内容用文本框(texbobox)写入。

数据库图片如下：

图 1.1 Navicat Premium中的mysql主机中的mydb数据库

2、前端php文件中的代码：注释有解析

html>

编码名称

styler:function(value,row,index){

if (value == null || value == ''){

return 'background-color:yellow;';

}

},

formatter:function(value,row,index){

if(value == null || value == ''){

return 'null';

}else{

return value +'岁';

}

}">名称

价格

编号：
用户名：
年龄：
性别：

//↓取到数据表格，添加属性↓

$('#dg').datagrid({

//↓url：一个URL从远程站点请求数据。↓

url:'dodatagrade.php',

//↓fitColumns:true,真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。↓

fitColumns:true,

//↓pagination:boolean 如果为true，则在DataGrid控件底部显示分页工具栏。 ↓

pagination:true,

//↓定义分页工具栏的位置。可用的值有：'top','bottom','both'。

//↑pagePosition:"top",

//↓rownumbers:boolean  如果为true，则显示一个行号列。

rownumbers:true,

//↓singleSelect:boolean  如果为true，则只允许选择一行。

ctrlSelect:true,

//↓pageSize:number 在设置分页属性的时候初始化页面大小。

pageSize:5,

//↓pageList array 在设置分页属性的时候 初始化页面大小选择列表。

pageList:[5,10,15,20],

//↓如果为true，当用户点击行的时候该复选框就会被选中或取消选中。

//checkOnSelect:true,

/*

rowStyler function :

返回样式如'background:red'。带2个参数的函数：

index：该行索引从0开始

row：与此相对应的记录行。 */

rowStyler:function(index,row){

if(index%2 !=0){

return "background:skyblue";

}else{

return "background:#693";

}

},//↑单行背景色为skyblue，双数行背景颜色为#693

/*↓ onDblClickRow：function

在用户双击一行的时候触发，参数包括：

index：点击的行的索引值，该索引值从0开始。

row：对应于点击行的记录。 */

onDblClickRow:function(index,row){

//↓ 取到dialog(对话框)中的各个input的id，通过texbox的setvalue给赋值点击行的内容

$("#id").textbox("setValue",row.id);

$("#username").textbox("setValue",row.username);

$("#age").textbox("setValue",row.age);

$("#sex").textbox("setValue",row.sex);

//↓ 取到dialog(对话框)整体的框架id，一开始是隐藏，加入closed:false，则消息框重新弹出。

$('#dd').dialog({  //属于点击之后弹出对话框

closed:false

});

}

});

//↓ 对话框的属性设置：

$('#dd').dialog({

width: 400,

height: 200,

//↓ 对话框设置隐藏

closed: true,

//↓cache:boolean 如果为true，在超链接载入时缓存面板内容。

cache: false,  //我也不知道具体是什么意思，copy有，没敢乱删

// modal:boolean 定义是否将窗体显示为模式化窗口。

modal: true

});

2、后台php中的代码：注释有解析

header("Content-Type:text/html;charset=utf-8");

//include_once("MySQL/mysql.php");

//↓打开数据库，观看我的前一篇文章。

define("HOST", "1xx.0.0.x");　　//ip地址

define("USERNAME", "root");

define("PASSWORD", "");

define("DBNAME", "mydb");

define("CHARSET", "utf8");

//@：取消错误提示

$conn = @mysqli_connect(HOST, USERNAME, PASSWORD, DBNAME) or die("数据库连接失败".mysqli_connect_error()."");

@mysqli_set_charset($conn, CHARSET) or die("字符集编码设置无效");

//↓ datagrid使用了分页的话，其框架自身会向后台传递page、rows这个两个属性值。

//↓接受由前端easyui传输过来的请求中所传递的page、rows这个两个属性值

$page =isset($_POST["page"])?$_POST["page"]:"1";

$rows =isset($_POST["rows"])?$_POST["rows"]:"10";

$start=$rows*($page-1);

$end=$rows*$page;

//↑inset判断是否传值过来，如果出过来输出传入值，如果没有则为：后面的值

//↓datagrid向后台传入sorttable 中的field值。

$sort=isset($_POST["sort"])?$_POST["sort"]:"id";

$order=isset($_POST["order"])?$_POST["order"]:"desc";

//↓写入masql语法 查询语句，表tb1中的所有数据后面是判断条件(正序，逆序，每页多少数据)

$sql = <<

select * from tb1 order by {$sort} {$order} limit {$start},{$rows}

sql;

//↓执行masql语句

$res = mysqli_query($conn, $sql);

//↓定义一个空数组

$arr = array();

//↓遍历数据库中的内容，放入数组arr

while ($row = mysqli_fetch_assoc($res)) {

$arr[] = $row;

};

//↓查询tb1中所有数据的数量

$getTotal=<<

select count(*) from tb1

total;

//↓执行mysql语句输出结果集

$count=mysqli_query($conn, $getTotal);

//处理结果集，返回一个索引数组。选第一个数据就是总数量

$total=mysqli_fetch_row($count)[0];

// datagrid接收的完整JSON格式为

// 简化版JSON:[{},{},{}]

// 完整版{"rows":[{},{},{}],"total":num}

$jsonArr=["rows"=>$arr,"total"=>$total];

$json = json_encode($jsonArr);

echo $json;

/*

具体样式为：

{"rows":[{"id":"31","username":"u8d75u516d","age":"22","sex":"u7537"},

{"id":"30","username":"u8d75u4e94","age":null,"sex":"u7537"},

{"id":"29","username":"u8d75u4e8c","age":"18","sex":"u7537"},

{"id":"28","username":"u8d75u4e09","age":"19","sex":"u7537"},

{"id":"27","username":"u8d75u4e00","age":"13","sex":"u7537"},

{"id":"27","username":"u8d75u56db","age":"20","sex":"u7537"},

{"id":"26","username":"u8d75u4e91","age":"122","sex":"u5973"},

{"id":"25","username":"u53f8u9a6cu5149","age":"122","sex":"u5973"},

{"id":"24","username":"u5c0fu6dd8u6c14","age":"23","sex":"u5973"},

{"id":"23","username":"u5f20u4e00","age":"122","sex":"u5973"}],"total":"19"}

*/