jQuery EasyUi 增刪改查
阿新 • • 發佈:2018-11-08
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' }); }}