项目总结—jQuery EasyUI- DataGrid使用
2015-08-24 14:48
169 查看
/article/1494222.html
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
<table id="dg"title="定性指标基础信息" class="easyui-datagrid" style="width:900px; height: 400px; padding-left: 200px;" url="get_users.php"toolbar="#toolbar" pagination="true"
rownumbers="true" fitcolumns="true"singleselect="true">
<thead>
//设置列名
<tr>
<thfieldthfield="firstname" width="50">定性指标级别</th>
<thfieldthfield="lastname" width="50">分数</th>
</tr>
</thead>
//数据填充
<tbody>
<tr>
<td>优秀</td>
<td>100</td>
</tr>
<tr>
<td>良好</td>
<td>80</td>
</tr>
<tr>
<td>一般</td>
<td>60</td>
</tr>
<tr>
<td>较差</td>
<td>50</td>
</tr>
</tbody>
</table>
//工具栏按钮
<dividdivid="toolbar">
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()">添加</a>
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改</a>
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-remove" plain="true"onclick="destroyUser()">删除</a>
</div>
下面这是效果图
![](http://img.blog.csdn.net/20140128101818234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvendrNjI2NTQyNDE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在这里需要注意的是,我们从数据库中取出来的内容是表格形式的dataset或datatable,而前台DataGrid接收的数据是固定格式的Json格式数据,所以我们需要将表格形式的数据转化为DataGrid需要的固定格式的Json格式数据。
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
{"total":28,"rows":[
{"产品ID":"FI-SW-01","产品名称":"Koi","价格":10.00,"状态":"P"},
{"产品ID":"K9-DL-01","产品名称":"Dalmation","价格":12.00,"状态"":"P"},
{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},
{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},
{"产品ID":"RP-LI-02","产品名称":"Iguana","价格":12.00,"状态"":"P"},
{"产品ID":"FL-DSH-01","产品名称":"Manx","价格":12.00,"状态"":"P"},
]}
下面我们来看下怎么样将数据库中的数据显示到前台的具体过程,
首先是前台页面的书写:
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
<div id="tt"class="easyui-tabs" style="width: 1100px; height: 530px;margin-top: 15px">
<div title="已录入单位"style="padding: 10px">
<table id="HaveInput"title="原始数据录入情况" class="easyui-datagrid" style="width:1050px; height: 480px; padding-left: 200px;"data-options="rownumbers:true,url:'InputScoresDetailsDeveloped.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb',"
toolbar="#bar"pagination="true" rownumbers="true"fitcolumns="true" striped="true"singleselect="true">
<thead>
<%--设置绑定表格的列名,列名与数据库相同--%>
<tr>
<thdata-optionsthdata-options="field:'DepartmentName',width:100">单位名称</th>
<thdata-optionsthdata-options="field:'QuantyOriginalData',width:100">定量原始数据</th>
<thdata-optionsthdata-options="field:'QualityOriginalData',width:100">定性原始数据</th>
<thdata-optionsthdata-options="field:'Remarks', width:175,align:'right'">备注</th>
<thdata-optionsthdata-options="field:'YearTime', width:85,align:'right'">年份</th>
</tr>
</thead>
</table>
<div id="bar">
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改数据</a>
</div>
</div>
表格属性里的的URL就是与一般处理程序交互用的。。
下面我们来看一般处理程序的书写,一般处理程序要首先接收由前台传过来的信息。
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
public void ProcessRequest(HttpContextcontext)
{
string command =context.Request.QueryString["test"];//前台传的标示值
if (command == "add")
{//调用添加方法
Add(context);
}
else if (command =="modify")
{//调用修改方法
Modify(context);
}
else
{//调用查询方法
Query(context);
}
}
然后的话才是我们从一般处理程序来向数据库获取要显示的数据库数据
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
public void Query(HttpContext context)
{
//调用B层的方法从而获取数据库的Dataset
DataSet ds =developmentRecordBLL.GetInputDevelopmentInfo();
//将Dataset转化为Datable
DataTable dt = ds.Tables[0];
int count = dt.Rows.Count;
string strJson =ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End();
}
然后我们来看下DataSet数据转化为Json数据的方法
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
public class ToJson
{
#region DataSet转换成Json格式
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <paramname="ds">DataSet</param>
///<returns></returns>
public static stringDataset2Json(DataSet ds, int total = -1)
{
StringBuilder json = newStringBuilder();
foreach (DataTable dt in ds.Tables)
{
//{"total":5,"rows":[
json.Append("{\"total\":");
if (total == -1)
{
json.Append(dt.Rows.Count);
}
else
{
json.Append(total);
}
json.Append(",\"rows\":[");
json.Append(DataTable2Json(dt));
json.Append("]}");
} return json.ToString();
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <paramname="dt"></param>
///<returns></returns>
public static stringDataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = newStringBuilder();
for (int i = 0; i <dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j <dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
if (dt.Columns.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
return jsonBuilder.ToString();
}
#endregion dataTable转换成Json格式
}
到这里我们就可以成功的将数据库中的数据显示到前台的DataGrid了。
下面我们来看下效果
![](http://img.blog.csdn.net/20140128101824812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvendrNjI2NTQyNDE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
到这里我们就可以将数据库中的数据在前台显示了。
概要
jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代码,一般情况下我们只需要使用一些html标记来定义用户接口,easyui将我们需要的功能都已经封装好了,我们只要来调用easyui给我们提供的接口就可以了,今天我们来学习下easyui中的DataGrid数据显示
我们可以在easyui-datagrid中显示数据,显示数据从大类上我们也分为两种,一种是datagrid显示的数据不是来自于数据库,另一种就是将数据库的内容进行显示.第一种
这一种是直接将写好的内容放到前台界面上写,所以相对来说比较简单,我们来看下前台代码的书写.[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
<table id="dg"title="定性指标基础信息" class="easyui-datagrid" style="width:900px; height: 400px; padding-left: 200px;" url="get_users.php"toolbar="#toolbar" pagination="true"
rownumbers="true" fitcolumns="true"singleselect="true">
<thead>
//设置列名
<tr>
<thfieldthfield="firstname" width="50">定性指标级别</th>
<thfieldthfield="lastname" width="50">分数</th>
</tr>
</thead>
//数据填充
<tbody>
<tr>
<td>优秀</td>
<td>100</td>
</tr>
<tr>
<td>良好</td>
<td>80</td>
</tr>
<tr>
<td>一般</td>
<td>60</td>
</tr>
<tr>
<td>较差</td>
<td>50</td>
</tr>
</tbody>
</table>
//工具栏按钮
<dividdivid="toolbar">
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()">添加</a>
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改</a>
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-remove" plain="true"onclick="destroyUser()">删除</a>
</div>
下面这是效果图
第二种
这种是将我们数据库中的内容显示到前台,我们经过一般处理程序从数据库中将数据提取出来,然后将数据显示到DataGrid中。在这里需要注意的是,我们从数据库中取出来的内容是表格形式的dataset或datatable,而前台DataGrid接收的数据是固定格式的Json格式数据,所以我们需要将表格形式的数据转化为DataGrid需要的固定格式的Json格式数据。
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
{"total":28,"rows":[
{"产品ID":"FI-SW-01","产品名称":"Koi","价格":10.00,"状态":"P"},
{"产品ID":"K9-DL-01","产品名称":"Dalmation","价格":12.00,"状态"":"P"},
{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},
{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},
{"产品ID":"RP-LI-02","产品名称":"Iguana","价格":12.00,"状态"":"P"},
{"产品ID":"FL-DSH-01","产品名称":"Manx","价格":12.00,"状态"":"P"},
]}
下面我们来看下怎么样将数据库中的数据显示到前台的具体过程,
首先是前台页面的书写:
[html] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
<div id="tt"class="easyui-tabs" style="width: 1100px; height: 530px;margin-top: 15px">
<div title="已录入单位"style="padding: 10px">
<table id="HaveInput"title="原始数据录入情况" class="easyui-datagrid" style="width:1050px; height: 480px; padding-left: 200px;"data-options="rownumbers:true,url:'InputScoresDetailsDeveloped.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb',"
toolbar="#bar"pagination="true" rownumbers="true"fitcolumns="true" striped="true"singleselect="true">
<thead>
<%--设置绑定表格的列名,列名与数据库相同--%>
<tr>
<thdata-optionsthdata-options="field:'DepartmentName',width:100">单位名称</th>
<thdata-optionsthdata-options="field:'QuantyOriginalData',width:100">定量原始数据</th>
<thdata-optionsthdata-options="field:'QualityOriginalData',width:100">定性原始数据</th>
<thdata-optionsthdata-options="field:'Remarks', width:175,align:'right'">备注</th>
<thdata-optionsthdata-options="field:'YearTime', width:85,align:'right'">年份</th>
</tr>
</thead>
</table>
<div id="bar">
<ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改数据</a>
</div>
</div>
表格属性里的的URL就是与一般处理程序交互用的。。
下面我们来看一般处理程序的书写,一般处理程序要首先接收由前台传过来的信息。
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
public void ProcessRequest(HttpContextcontext)
{
string command =context.Request.QueryString["test"];//前台传的标示值
if (command == "add")
{//调用添加方法
Add(context);
}
else if (command =="modify")
{//调用修改方法
Modify(context);
}
else
{//调用查询方法
Query(context);
}
}
然后的话才是我们从一般处理程序来向数据库获取要显示的数据库数据
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
public void Query(HttpContext context)
{
//调用B层的方法从而获取数据库的Dataset
DataSet ds =developmentRecordBLL.GetInputDevelopmentInfo();
//将Dataset转化为Datable
DataTable dt = ds.Tables[0];
int count = dt.Rows.Count;
string strJson =ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End();
}
然后我们来看下DataSet数据转化为Json数据的方法
[csharp] view plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
public class ToJson
{
#region DataSet转换成Json格式
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <paramname="ds">DataSet</param>
///<returns></returns>
public static stringDataset2Json(DataSet ds, int total = -1)
{
StringBuilder json = newStringBuilder();
foreach (DataTable dt in ds.Tables)
{
//{"total":5,"rows":[
json.Append("{\"total\":");
if (total == -1)
{
json.Append(dt.Rows.Count);
}
else
{
json.Append(total);
}
json.Append(",\"rows\":[");
json.Append(DataTable2Json(dt));
json.Append("]}");
} return json.ToString();
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <paramname="dt"></param>
///<returns></returns>
public static stringDataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = newStringBuilder();
for (int i = 0; i <dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j <dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
if (dt.Columns.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
return jsonBuilder.ToString();
}
#endregion dataTable转换成Json格式
}
到这里我们就可以成功的将数据库中的数据显示到前台的DataGrid了。
下面我们来看下效果
到这里我们就可以将数据库中的数据在前台显示了。
总结
在easyui中datagrid的使用还是很重要的,在这里我们先简要的介绍下,使datagrid可以简单的显示一些数据,关于datagrid的进一步的知识我们在下篇博客中将继续进行介绍。相关文章推荐
- jquery mobile
- 10个超棒jQuery表单操作代码片段
- jquery马赛克拼接翻转效果代码分享
- jquery 元素选择器集合
- jQuery 表单对象属性过滤现则器
- jquery 地址栏链接与a标签链接匹配 特效代码总结(二)
- jquery extend的用法
- jquery/js特效代码总结(一):tab切换
- jquery+CSS实现的水平布局多级网页菜单效果
- jQuery实现的背景动态变化导航菜单效果
- Jquery获取表单select元素的文本
- 0000005_java学习之路_ko+jquery获取select选中项信息
- jquery带下拉菜单和焦点图代码分享
- jQuery仿360导航页图标拖动排序效果代码分享
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- jquery--创建一个自定义 jQuery 插件
- jquery--jQuery.extend 函数详解
- jquery实现的蓝色二级导航条效果代码
- angular 封装 Jquery插件时作用域问题
- jquery实现的仿天猫侧导航tab切换效果