前几天用easyui实现数据的添加删除,正批量的添加删除,当时也没有细看官网的一些实例,就是实现了,忙了半天,才忽然想起来,官网上看看API是怎么说的吧,后来在官网看到有这样的方法,实现起来也简单化了很多。那么交互如何实现了,又要用到ajax,那么它的使用时如何的呢。又跑回去看官网的实例了。跑来跑去还是跑不了官网的实例。所以去研究或学习的时候先要去看看实例或文档比较的好。好了看实例。
实现的效果是批量添加选中的数据。由于是table,无法实现整体提交表单的功能。所以只能将选中的数据进行整合添加到一个变量中,一般处理程序中对变量进行分割,取出各自需要的内容。
效果图
拼接的数据显示
不同的格式显示
html代码如下
引入的js和css
<link rel="stylesheet"type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet"type="text/css" href="CSS/icon.css" />
<link rel="stylesheet"type="text/css" href="CSS/demo.css" />
<script type="text/javascript"src="JS/jquery.min.js"></script>
<script type="text/javascript"src="JS/jquery.easyui.min.js"></script>
<div class="searchLock"style="width: 35%">
<divclass="panel-title">
<h3class="panel-title">所有栏目</h3>
</div>
<div class="tlcorner">
</div>
<div class="trcorner">
</div>
<div class="blcorner">
</div>
<div class="brcorner">
</div>
<divclass="cnt-wp">
<divclass="cnt">
<tableid="tt" class="easyui-datagrid" style="height:210px" idfield="itemid"
pagination="true"
data-options="rownumbers:false,url:'JS/datagrid_data1.aspx',
pageSize:5,pageList:[5,10],
method:'get',toolbar:'#tb' ,"
fitcolumns="true" striped="true">
<thead>
<thdata-options="field:'ck',checkbox:true"></th>
<thdata-options="field:'productid',width:100">Product</th>
<thdata-options="field:'listprice',width:80,align:'right'">ListPrice</th>
<thdata-options="field:'unitcost',width:80,align:'right'">UnitCost</th>
<thdata-options="field:'attr1',width:250">Attribute</th>
<thdata-options="field:'status',width:60,align:'center'">Status</th>
</thead>
<%--表格内容--%>
<tbodyid="xianshi">
</tbody>
</table>
</div>
</div>
</div>
这里用到的是easyui的datagrid控件,json的数据自动匹配。
对应的js代码
function getSelections() {
var ss = [];
var rows =$('#tt').datagrid('getSelections');
if (rows.length > 0) {
if(confirm("确定添加选中记录?")) {
for (var i = 0; i <rows.length; i++) {
var row = rows[i];
//ss.push('<span>' + row.productid + ":" + row.attr1 +'</span>');
ss.push(row.productid +"," + row.attr1 + "," + row.itemid + "," +row.listprice + "," + row.status);
}
var id = ss.join(',');
var test ="addc";
$.ajax({
url:"SetMenun.ashx/ProcessRequest?id=" + id + "&test=" +test,
success: function(text) {
//grid.reload();
},
error: function () {
}
});
}
alert(id);
} else {
alert("请选中一条记录");
}
$.messager.alert('Info',ss.join('<br/>'));
}
这里用到了ajax的异步处理,将所有选中的行数据进行拼接返回到服务端的一般处理程序中,一般处理程序接收需要的字段进行筛选。
一般处理程序
public class SetMenun : IHttpHandler
{
BLL.userColumInfoBLL columinfobll = newuserColumInfoBLL();
BLL.userMenuInfoBLL menuinfobll = newuserMenuInfoBLL();
BLL.columBLL columbll = new columBLL();
public void ProcessRequest(HttpContextcontext)
{
//context.Response.ContentType ="text/plain";
//context.Response.Write("Hello World");
string command =context.Request.QueryString["test"];
if (command == null)
{
QueryColum(context);
}
//添加选择的栏目
if (command == "addc")
{
AddColum(context);
}
//添加选择的菜单
if (command == "addm")
{
AddMenu(context);
}
//查询栏目
if (command == "queryc")
{
QueryColum(context);
}
//添加选择的栏目下的菜单
if (command == "querym")
{
QueryMenu(context);
}
//删除栏目
if (command == "deletec")
{
DeleteColum(context);
}
//删除菜单
if (command == "deletem")
{
DeleteMenu(context);
}
}
/// <summary>
/// 添加栏目记录
/// </summary>
/// <paramname="context"></param>
public void AddColum(HttpContextcontext)
{
//实体
columEntity columEntity = newcolumEntity();
menuEntity menuEntity = newmenuEntity();
PublicClass test = newPublicClass();
string strresult = "";
//TODO:
//给实体循环赋值
//split方法将字段进行筛选:
//TODO:需要亲自验证
String[] list= context.Request.QueryString["id"].Split(',');
int count = list.Length;
//if按照每个行数据传输的字段,进行递增处理。
for (int i = 0; i < count;i=i+5)
{
// 栏目ID
columEntity.columID =i+1;
//栏目名称
columEntity.cName = list[i];
columEntity.cAddress = list[i +1];
columEntity.cOpenType = list[i+ 2];
columEntity.cOrder = list[i +3];
// columEntity.columID =Convert.ToInt16( list[i + 4]);
//other1作为添加用户
menuEntity.other1 =context.Server.UrlDecode(context.Request.QueryString["UserName"]);
test.SetObj(columbll);//调用相应界面下B层中的类
try
{
//调用公共处理类的方法。该方法匹配需要的类。
if (test.Add(columEntity,null, null))
{
strresult=strresult+"true";
}
else
{
strresult =strresult+"false";
}
}
catch (System.Exception ex)
{
throw ex;
}
}
int number =strresult.IndexOf("false");
if (number == -1)
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
}
显示的效果图可以查看数据库信息图如下
综合处理发现。对于数据显示问题,一定要处理json返回的数据格式和类型的匹配,对于循环添加的问题,并不是难题,只要数据处理得当,就没什么难题了。