EasyUI笔记(六)数据表格
用asp.net结合easyui做个一个数据网格的页面,包括对数据的增删改查,界面如下:
<body>
<table id="tb1"></table>
<div id="tb" style="padding:5px">
<div style="margin-bottom:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reload()">刷新</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="Add()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="edit()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="destroy()">删除</a>
</div>
<div>
查询名称:<input type="text" id="Eq" name="Eq" style="width:150px"/>
<select id="order" class="easyui-combobox" style="width:100px">
<option value="asc">升序</option>
<option value="desc">降序</option>
</select>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="obj.search()">查询</a>
</div>
</div>
<%-- 弹窗 Start--%>
<div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px" data-options="closed:true,buttons:'#dlg-buttons'">
<div class="ftitle">设备信息</div>
<form id="fm" method="post" novalidate="novalidate">
<div class="fitem">
<label>产品编号:</label>
<input id="ProductID" name="ProductID" class="easyui-validatebox" data-options="required:false"/>
</div>
<div class="fitem">
<label>产品名称:</label>
<input id="Name" name="Name" class="easyui-validatebox" data-options="required:true"/>
</div>
<div class="fitem">
<label>描述:</label>
<input id="Description" name="Description" class="easyui-validatebox" data-options="required:true"/>
</div>
<div class="fitem">
<label>种类:</label>
<input id="Category" name="Category" class="easyui-validatebox" data-options="required:true"/>
</div>
<div class="fitem">
<label>价格:</label>
<input id="Price" name="Price" class="easyui-validatebox" data-options="required:true,validType:'intOrFloat'"/>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="save()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<%-- 弹窗 End --%>
</body>
$(function () {
$('#tb1').datagrid({
url: '../Handler/GetDataFormSql.ashx',
width: 1200,
title: '管理',
method: 'get',
toolbar: '#tb',
//rownumbers: true,
singleSelect:true,
columns: [[
{ field: 'ProductID', title: '编号', width: 150 },
{ field: 'Name', title: '名称', width: 150 },
{ field: 'Description', title: '描述', width: 250 },
{ field: 'Category', title: '种类', width: 150 },
{ field: 'Price', title: '价格', width: 150 }
]],
pagination: true,
pageSize: 20,
pageList: [20, 30 , 40]
});
})
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int page = 1, rows = 10;
//EasyUI自带的两个参数rows与page ,表示当前页与行数
if (context.Request.QueryString["rows"] != null)
{
rows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (context.Request.QueryString["page"] != null)
{
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
//查询分页 stratIndex endIndex
int stratIndex, endIndex;
stratIndex = (page - 1) * rows + 1;
endIndex = page * rows;
//查询排序 key order
string key = "", order = "desc";
if (context.Request.QueryString["key"] != null)
{
key = context.Request.QueryString["key"].ToString().Trim();
}
if (context.Request.QueryString["order"] != null)
{
order = context.Request.QueryString["order"].ToString().Trim();
}
//设置模糊查询
StringBuilder sqlWhere = new StringBuilder();
if (key != "") {
sqlWhere.AppendFormat("upper(ProductID) like '%{0}%' or "+
"upper(Name) like '%{0}%' or "+
"upper(Description) like '%{0}%' or " +
"upper(Category) like '%{0}%' or " +
"upper(Price) like '%{0}%'",key);
}
//查询数据库
DAL.SqlHelper sqlhelper = new DAL.SqlHelper();
//获取查询数据的行数
int count = sqlhelper.EUGetRecordCount(sqlWhere.ToString());
//封装数据到dataset
DataSet ds = sqlhelper.GetListByPagebykey(sqlWhere.ToString(), order, stratIndex, endIndex);
//将dataset转化为Json格式
string strToJon = DAL.ToJson.DatasetJson(ds, count);
context.Response.Write(strToJon);
context.Response.End();
}
public int EUGetRecordCount(string key)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("select count(1) FROM Products ");
if (key.Trim() != "")
{
strSql.Append("where " + key);
}
object obj = DBHelper.GetSingle(strSql.ToString());
if (obj == null)
{
return 0;
}
else
{
return Convert.ToInt32(obj);
}
}
public DataSet GetListByPagebykey(string Key, string order, int startIndex, int endIndex)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT * FROM ( ");
strSql.Append(" SELECT ROW_NUMBER() OVER (");
if (!string.IsNullOrEmpty(Key.Trim()))
{
strSql.Append("order by T." + Key+" " + order);
}
else
{
strSql.Append("order by T.ProductID asc");
}
strSql.Append(")AS Row, T.* from Products T ");
if (!string.IsNullOrEmpty(Key.Trim()))
{
strSql.Append(" WHERE " + Key);
}
strSql.Append(" ) TT");
strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
return DBHelper.Query(strSql.ToString());
}
public class ToJson
{
/// <summary>
/// DataSet转换成Json格式
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string DatasetJson(DataSet ds, int total = -1)
{
StringBuilder json = new StringBuilder();
foreach (DataTable dt in ds.Tables)
{
json.Append("{\"total\":");
if (total == -1)
{
json.Append(dt.Rows.Count);
}
else
{
json.Append(total);
}
json.Append(",\"rows\":");
json.Append(DataTableJson(dt));
json.Append("]}");
} return json.ToString();
}
private static string DataTableJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
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("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
return jsonBuilder.ToString();
}
}
public int Add(Products model)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("insert into Products(");
strSql.Append("Name,Description,Category,Price)");
strSql.Append(" values (");
strSql.Append("@Name,@Description,@Category,@Price)");
strSql.Append(";select @@IDENTITY");
SqlParameter[] parameters = {
new SqlParameter("@Name", SqlDbType.NVarChar,255),
new SqlParameter("@Description", SqlDbType.NVarChar,255),
new SqlParameter("@Category", SqlDbType.NVarChar,255),
new SqlParameter("@Price ", SqlDbType.Decimal,255),
};
//parameters[0].Value = model.ProductID;
parameters[0].Value = model.Name;
parameters[1].Value = model.Description;
parameters[2].Value = model.Category;
parameters[3].Value = model.Price;
object obj = DBHelper.GetSingle(strSql.ToString(), parameters);
if (obj == null)
{
return 0;
}
else
{
return Convert.ToInt32(obj);
}
}
转载于:https://www.cnblogs.com/iwsx/p/7162012.html
EasyUI笔记(六)数据表格相关推荐
- Easyui之Datagrid(数据表格)
Datagrid 前言 1.概念 2.常见使用案例 3.datagrid属性 4.datagrid事件 5.datagrid方法 6.案例演示 7.为什么使用datagrid 总结 前言 今天为大家分 ...
- easyui—DataGrid(数据表格)
目录 一.DataGrid(数据表格) 一.DataGrid(数据表格) DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间 ...
- (五)EasyUI使用——datagrid数据表格
DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...
- EasyUi之动态数据表格的实现
文章目录 前言 使用步骤 1.理解对应数据格式 2.使用控件 代码实现 1.思路 2.后台数据格式的转变 3.控件函数配置 4.具体实现 5.代码优化 实现效果 前言 首先我们学习一款框架的方法应该是 ...
- Asp.net控件开发学习笔记(六)----数据回传
在Asp.net中,利用Http Post的回传机制意味着可以再客户端存储状态并且可以在服务器接收.Asp.net中大部分控件都提供了存储自身状态的功能并且在自身状态改变时引发对应事件.IPostDa ...
- DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination ...
- datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件(el-datagrid)...
背景 element-ui 中的 el-table 组件只提供了数据展示,而分页功能作为一个单独的组件 el-pagination,并没有像 Ant Design 一样集成到 el-able 组件中, ...
- EasyUI DataGrid DetailView(数据表格详细展示带子表格)
Mark一下EASY UI 的数据表格详细展示使用记录. 第一步:创建页面布局 这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview.js & ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- Easyui中DataGrid(数据表格)
Easyui中DataGrid(数据表格) 1.DataGrid简介 2.实现过程 2.1jsp页面的代码块(两种方式) 第一种 第二种 3.DataGrid属性 4.实践操作 4.1界面创建 4.2 ...
最新文章
- Yii2 使用 Joins 查询
- 打开脑科学研究的另一扇窗:脑神经化学活体原位电化学分析新技术
- python中嵌套循环的运行原理_python中while嵌套循环的执行流程问题?
- OpenStack镜像制作笔记 --以windows8.1-amd64为例
- MATLAB工具箱介绍
- Java常用设计模式————原型模式(二)之深拷贝与浅拷贝
- 1.9 使用PuTTY远程连接Linux 1.10 使用xshell连接Linux 1.11 PuTTY密钥认证 1.12 xshell密钥认证...
- getch方法_getch()函数
- c语言怎么编程机器人,移动机器人(电子球)编程(c语言)
- java数据类型简介
- 【转】Filter Concatenation理解
- rabbitmq新增用户
- Android保存图片到系统图库并通知系统相册刷新
- 空间后方交会编程c语言,C语言空间后方交会源代码.doc
- va_list(可变参数函数的使用)
- 黑桃怎么用html代码,index.html
- 不同方式实现IP访问限制
- MySql命令行基本语法
- 计算机病毒主动传播途径,蠕虫病毒的传播方式是什么
- 登高车的使用注意事项及具体操作步骤有哪些?