1. 程式人生 > >jQuery EasyUi 增刪改查

jQuery EasyUi 增刪改查

easyui的crud(dialog,datagrid、form講解)

1、?開啟tab頁

2、?建立dao

3、?Web的增刪改查與配置

4、?使用datagrid承載查詢資料

5、?增加和修改使用dialog與form

6、?使用ajax做刪除

7、?解決tab頁面重複的問題
前臺程式碼

$(function() { var ctx = $("#ctx").val(); $('#dg').datagrid({  url : ctx+'/userAction.action?methodName=list',  fitColumns : true,  pagination : true,  columns : [ [ {   field : 'uid',   title : 'ID',   width : 100  }, {
field : 'uname',   title : '名稱',   width : 100  }, {   field : 'upwd',   title : '密碼',   width : 100  } ] ],  toolbar : [ {   iconCls : 'icon-edit',   handler : function() {    var row = $('#dg').datagrid("getSelected");    if(row){     //讀取所選記錄填充到表單中     $('#ff').form('load', row);     //開啟窗體     $("#dd").dialog('open');    }else{     alert("請選擇!");    }   }
}, '-', {   iconCls : 'icon-add',   handler : function() {    //開啟窗體    $("#dd").dialog('open');   }  }, '-', {   //刪除按鈕   iconCls : 'icon-remove',   handler : function() {    var row = $('#dg').datagrid("getSelected");    if(row){     $.messager.confirm('確認對話方塊', '你確定要刪除嗎?', function(r){      if (r){       $.ajax({         //跳轉增加地址        url:ctx+'/userAction.action?methodName=del&&SerialNo='+row.SerialNo,         dataType:'json' ,        success:function(result){         $.messager.alert('提示資訊', result);          if(result==1){          $.messager.alert('提示資訊', '操作成功');          }else{          $.messager.alert('提示資訊', '操作失敗');          }        }         });       // 重新載入當前頁面資料        $('#dg').datagrid('reload');      }     });         }else{     $.messager.alert('提示資訊', '請選擇要刪除的列!');     }   }  } ] }); }) function ok() { var ctx = $("#ctx").val(); var serialNo = $("#SerialNo").val(); if(serialNo==""){  //增加  $('#ff').form('submit',{    //跳轉增加地址   url:ctx+'/userAction.action?methodName=add',    });  //關閉窗體  $("dd").dialog('close'); }else{  alert("修改");  //修改  $('#ff').form('submit',{    //跳轉修改地址   url:ctx+'/userAction.action?methodName=update'    }); }}