1. 程式人生 > >EasyUI 增刪改查完全詳細

EasyUI 增刪改查完全詳細

本例項使用EasyUI建立表格,元素,視窗,以及各種請求。增加,修改,查詢及其他知識基本涵蓋完全。有用到js建立和html建立.

整體概覽:

多條件的分頁查詢

dialog對話方塊實現新增功能,加入驗證

window彈窗多條件分頁查詢

修改資訊


匯入:
  1. <prename="code"class="html"><%@ page contentType="text/html; charset=utf-8"import="java.util.*"language="java" %>
  2. <%@page import="java.text.SimpleDateFormat"
    %>
  3. <%@ page language="java"pageEncoding="UTF-8"%>
  4. <linkrel="stylesheet"type="text/css"href="/portal/css/use.css"/>
  5. <linkrel="stylesheet"type="text/css"href="/portal/css/style.css">
  6. <linkrel="stylesheet"type="text/css"href="/portal/js/jquery-easyui/themes/default/easyui.css">
  7. <link
    rel="stylesheet"type="text/css"href="/portal/js/jquery-easyui/themes/icon.css">
  8. <scripttype="text/javascript"src="/portal/js/jquery-easyui/jquery-1.6.min.js"></script>
  9. <scripttype="text/javascript"src="/portal/js/jquery-easyui/jquery.easyui.min.js"></script>


前端js:
[javascript]
 view plain copy
  1. <script type="text/javascript">  
  2.     /* 啟動時載入 */
  3.     $(function(){  
  4.         $('#movement_ode').combobox({      
  5.             url:'/portal/goodsMovingTypeAction.do?type=query',      
  6.             valueField:'movement_types',      
  7.             textField:'summary'
  8.         });  
  9.         $("#goods_tab").datagrid({  
  10.             title: '貨品移動填報',  
  11.             checkOnSelect: false,  
  12.             pagination:true,  
  13.             pageSize:20,  
  14.             pageNumber:1,  
  15.             toolbar: '#tb',  
  16.             url: '/portal/queryGoodsMovementAction.do',  
  17.             loadMsg:'載入中...',  
  18.             fit: true,  
  19.             columns: [[  
  20.                 { field: 'id', checkbox: true},  
  21.                 { field: 'moveid', title: '編號', width:60 },  
  22.                 { field: 'postingdate', title: '過帳日期', width:80},  
  23.                 { field: 'transferreno', title: '移動單號', width:100 },  
  24.                 { field: 'movementcodename', title: '移動型別資訊說明', width:150 },  
  25.                 { field: 'fromstoragelocation', title: '來源庫位', width:60 },  
  26.                 { field: 'tostoragelocation', title: '接受庫位', width:60 },  
  27.                 { field: 'frommaterial', title: '商品編碼', width:80 },  
  28.                 { field: 'frombatchnumber', title: '商品批號', width:80 },  
  29.                 { field: 'quantity', title: '數量', width:60 },  
  30.                 { field: 'reasoncodename', title: '原因程式碼說明', width:120 },  
  31.                 { field: 'documentdatetime', title: '建立時間', width:80 },  
  32.                 { field: 'del_flag', title: '記錄狀態', width:80,  
  33.                     formatter: function(value,row,index){  
  34.                         if (value=='0'){                              
  35.                             return'<a  href="javascript:void(0);" style="color: #000000;" onclick="updateDelFlag('+value+','+row.moveid+');">有效</a>';  
  36.                         }   
  37.                         if (value=='1'){  
  38.                             return'<a  href="javascript:void(0);" style="color: #ff0000;" onclick="updateDelFlag('+value+','+row.moveid+');">無效</a>';  
  39.                         }  
  40.                     }  
  41.                 },  
  42.                 { field: 'exec_flag', title: '同步狀態', width:80,  
  43.                     formatter: function(value,row,index){  
  44.                         if (value=='0'){  
  45.                             return'未同步';  
  46.                         }   
  47.                         if (value=='1'){  
  48.                             return'已同步';  
  49.                         }  
  50.                     }  
  51.                 }  
  52.             ]]            
  53.         });   
  54.         /* 選擇ERP商品資訊 */
  55.         $("#select_erp_win").window({  
  56.             title:'選擇ERP商品資訊',  
  57.             width:640,      
  58.             height:400,      
  59.             modal:true
  60.         }).window("close");    
  61.         $("#select_erp_tab").datagrid({  
  62.             url:"/portal/queryerpgoodsAction.do",  
  63.             loadMsg:'載入中...',  
  64.             singleSelect:true,  
  65.             pagination:true,