jquery easyui datagrid實(shí)現(xiàn)增加,修改,刪除方法總結(jié)

字號:


    這篇文章主要介紹了jquery easyui datagrid實(shí)現(xiàn)增加,修改,刪除方法,結(jié)合實(shí)例形式分析了jquery easyui datagrid結(jié)合asp.net實(shí)現(xiàn)數(shù)據(jù)的增刪改等操作的步驟與相關(guān)技巧,需要的朋友可以參考下
    本文實(shí)例講述了jquery easyui datagrid實(shí)現(xiàn)增加,修改,刪除的方法。分享給大家供大家參考,具體如下:
    頁面:
    <body>
      <form id="form1" runat="server">
      <table id="tt">
      </table>
      </form>
    </body>
    引用的JS:
    <link rel="stylesheet" type="text/css" href="/script/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/script/themes/icon.css" />
    <script type="text/javascript" src="/script/jquery-1.4.2.min.js" </script>
    <script type="text/javascript" src="/script/jquery.easyui.min.js" </script>
    <script type="text/javascript" src="/script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script>
    JS:
    <script type="text/javascript"><!--
        $(function(){
          $('#tt').datagrid({
            width:810,
            height:400,
            idField:'xsbh',
            url:'studentHandler.ashx',
            singleSelect:true,
            columns:[[
              {field:'xsbh',title:'編號',width:80},
             {field:'UserName',title:'姓名',width:100},
             {field:'Sex',title:'性別',width:30},
             {field:'SchoolYear',title:'年份',width:50},
             {field:'opt',title:'操作',width:100,align:'center',
              formatter:function(value,rec,index){
                var s = '<a href="#" mce_href="#" onclick="view(\''+ rec.xsbh + '\')">查看</a> ';
                var e = '<a href="#" mce_href="#" onclick="edit(\''+ rec.xsbh + '\')">編輯</a> ';
                var d = '<a href="#" mce_href="#" onclick="del(\''+ index +'\')">刪除</a> ';
                return s+e+d;
              }
             }
            ]],
            toolbar:[{
              text:'增加',iconCls:'icon-add',handler:function(){
                window.location.href='StuAdd.aspx';
              }
            },
            {text:'導(dǎo)入',iconCls:'icon-add',handler:function(){
              window.location.href='StuImport.aspx'
              }
            },
            {text:'查找',iconCls:'icon-search'}
            ],
            pagination:true
          });
        })
         function view(bh) //轉(zhuǎn)到查看頁面
          {
            window.location.href='StuView.aspx?id='+bh+'&page=stu';
    //       var row = $('#tt').datagrid('getSelected');
    //        if(row)
    //        {
    //         alert(row.xsbh);
    //        }
          }
         function edit(bh) //轉(zhuǎn)到編輯頁面
         {
            window.location.href='StuEdit.aspx?id='+bh;
         }
         function del(index){ //刪除操作
          $.messager.confirm('確認(rèn)','確認(rèn)刪除?',function(row){
            if(row){
              var selectedRow = $('#tt').datagrid('getSelected'); //獲取選中行
              $.ajax({
                url:'delHandler.ashx?id='+selectedRow.xsbh+'&type=stu',
    //加了個(gè)type,作用是以后不管什么刪除,都可以轉(zhuǎn)到這個(gè)ashx中處理
                success:function(){alert('刪除成功');}
              });
              $('#tt').datagrid('deleteRow',index);
            }
          })
         }
    // -->
    </script>
     這里面要注意的是,"操作"的跨行,一定要帶上field:'opt',當(dāng)然,field可以是任何值,這個(gè)值不用從數(shù)據(jù)庫中綁定,隨便取.如果沒有field的話,會(huì)彈出 "rowspan為空或不是對象"的錯(cuò)誤
    獲取數(shù)據(jù)和分頁ashx:
    using System;
    using System.Web;
    using System.Data;
    using System.Text;
    public class studentHandler : IHttpHandler {
      public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        DataSet ds = new DataSet();
        //點(diǎn)擊datagrid的分頁按鈕,自動(dòng)向后臺發(fā)送2個(gè)參數(shù),rows和page,代表每頁記錄數(shù)和頁索引
        int row = int.Parse(context.Request["rows"].ToString());
        int page = int.Parse(context.Request["page"].ToString());
        ds = GetContent(row, page);
        string text =json.Dataset2Json(ds);
        context.Response.Write(text);
      }
      private DataSet GetContent(int pagesize,int pageindex)
      {
        Graduate.BLL.Student bll = new Graduate.BLL.Student();
        return bll.GetList(pagesize, pageindex);
      }
      public bool IsReusable {
        get {
          return false;
        }
      }
    }
    刪除ashx
    using System;
    using System.Web;
    using System.Web.SessionState;
    public class delHandler : IHttpHandler,IRequiresSessionState {
      public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string id = context.Request["id"].ToString();
        string type = context.Request["type"].ToString();
        switch (type)
        {
          case "stu":
            Graduate.BLL.Student stubll = new Graduate.BLL.Student();
            stubll.Delete(id, HttpContext.Current.Session["username"].ToString(), HttpContext.Current.Session["usertype"].ToString());
            break;
          default:
            break;
        }
      }
      public bool IsReusable {
        get {
          return false;
        }
      }
    }
    IRequiresSessionState 是因?yàn)橛玫搅朔?wù)器端的session,沒有用到的話可以去掉
    希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。