easyUI 中datatGrid操作

前几天用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返回的数据格式和类型的匹配，对于循环添加的问题，并不是难题，只要数据处理得当，就没什么难题了。