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