下面我們創建一個使用EasyUI布局的asp.net網站查詢與刪除數據(連接數據庫)

新建網站-新建數據庫(一個表,主要作業是了解一下easyUI的使用)

打開EasyUI幫助文檔,自行渲染

使用datagrid(數據表格)操作數據

當然,小項目,我還是搭載了三層,你們就隨便了:)

數據就加載出來了

這裏主要的有幾點

1.模擬服務端和客戶端

需要建兩個頁面,一個服務端,一個客戶端

服務端,需要刪除html頁面 只留下page指令

不然會出現錯誤

2需要引用Newtonsoft 實現數據序列化成為json數據

這樣子,就查詢出來數據了

2 接下來做刪除了

在刪除這裏,寫個方法,不過 要想判斷checked 是否選擇,選擇,執行,未選擇,不執行

   function removes() {
          var s=   $(‘#dg‘).datagrid(‘getChecked‘);
          if (s.length > 0) {
              $.each(s, function (i, item) {
                  //item.CarID
                  //alert(item.CarID)        獲取id
 

                  $.ajax({
                      Type: ‘Get‘,
                      //data: ‘‘,
                      dataType: ‘json‘,
                      url: ‘Default3.aspx?id=‘ + item.CarID,
                      success: function (data) {
                          $.messager.alert("溫馨提示","刪除成功");
                          $(
 
‘#dg‘).datagrid(‘reload‘);
                          console.log(data);
                      },
                      error: function (error) {
                          $.messager.alert("溫馨提示", "刪除失敗");
                      }

                  });

              });

          } else {
              $.messager.alert("提示","還沒有選擇數據");
          }

在這裏 我有個問題

data 這裏 可寫 可不寫嘛???

因為

  //data: ‘‘,
               
 url: ‘Default3.aspx?id=‘ + item.CarID,   --這樣子寫的話,可以註釋data

假如不這樣寫的話


就這樣寫也可以

最後,點擊會彈窗

加入你要刪除完之後,更新的話

加入這個方法(更新數據) 即可

這就是 使用EasyUI實現數據查詢與刪除

下面貼出主要代碼

    <script>
        $(function () {
            $(‘#dg‘).datagrid({
                fitColumns: true,
                striped: true,
                rownumbers: false,  //顯示行號
                singleSelect: false,    //多行
               


                loadMsg: ‘加載中,請稍候...‘,
                url: ‘Default2.aspx‘,
                toolbar: [{
                    text: ‘刪除‘,
                    iconCls: ‘icon-remove‘,
                    handler: function () {
                        removes();
                    }
                }, {
                    text: ‘幫助‘,
                    iconCls: ‘icon-help‘,
                    handler: function () { alert(‘幫助按鈕‘) }
                }],


                columns: [[
                     { width: 100, checkbox: true, },
                    { field: ‘CarID‘, title: ‘編號‘, width: 100 },
                    { field: ‘CarName‘, title: ‘Name‘, width: 100 },
                    { field: ‘CarConter‘, title: ‘conter‘, width: 100, align: ‘right‘ ,formatter:gaibian},
                    { field: ‘CarTitle‘, title: ‘title‘, width: 100, align: ‘right‘ }
                ]]
            });
        });
        function gaibian(value, row, index) {
            if (index>2) {
                return ‘<span  style="color:red;">‘ + value +row.CarName+ ‘</span>‘;

            } else {
                return ‘<span  color="color:pink;">‘+value+‘</span>‘;
            }

        }
        function removes() {
          var s=   $(‘#dg‘).datagrid(‘getChecked‘);
          if (s.length > 0) {
              $.each(s, function (i, item) {
                  //item.CarID
                  //alert(item.CarID)        獲取id
                  $.ajax({
                      Type: ‘Get‘,
                      data: ‘id=‘ + item.CarID,
                      dataType: ‘json‘,
                      url: ‘Default3.aspx‘,
                      success: function (data) {
                          $.messager.alert("溫馨提示","刪除成功");
                          $(‘#dg‘).datagrid(‘reload‘);
                          console.log(data);
                      },
                      error: function (error) {
                          $.messager.alert("溫馨提示", "刪除失敗");
                      }

                  });

              });

          } else {
              $.messager.alert("提示","還沒有選擇數據");
          }


        }
    </script>

可以多行刪除

  public static int deletes(string id) {
          string sql = "delete  cars  where  CarID in("+id+")";
          int  count= DBHelper.Execute(sql);
          return count;
      }

歡迎交流哦 :)

使用EasyUI查詢與刪除