本实例使用EasyUI创建表格,元素,窗口,以及各种请求。增加,修改,查询及其他知识基本涵盖完全。有用到js创建和html创建.
整体概览:
多条件的分页查询
dialog对话框实现添加功能,加入验证
window弹窗多条件分页查询
修改信息
导入:
<pre name="code" class="html"><%@ page contentType="text/html; charset=utf-8" import="java.util.*" language="java" %>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/portal/css/use.css" />
<link rel="stylesheet" type="text/css" href="/portal/css/style.css">
<link rel="stylesheet" type="text/css" href="/portal/js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/portal/js/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="/portal/js/jquery-easyui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="/portal/js/jquery-easyui/jquery.easyui.min.js"></script>
前端js:
<script type="text/javascript">
/* 启动时加载 */
$(function(){
$('#movement_ode').combobox({
url:'/portal/goodsMovingTypeAction.do?type=query',
valueField:'movement_types',
textField:'summary'
});
$("#goods_tab").datagrid({
title: '货品移动填报',
checkOnSelect: false,
pagination:true,
pageSize:20,
pageNumber:1,
toolbar: '#tb',
url: '/portal/queryGoodsMovementAction.do',
loadMsg:'加载中...',
fit: true,
columns: [[
{ field: 'id', checkbox: true},
{ field: 'moveid', title: '编号', width:60 },
{ field: 'postingdate', title: '过帐日期', width:80},
{ field: 'transferreno', title: '移动单号', width:100 },
{ field: 'movementcodename', title: '移动类型信息说明', width:150 },
{ field: 'fromstoragelocation', title: '来源库位', width:60 },
{ field: 'tostoragelocation', title: '接受库位', width:60 },
{ field: 'frommaterial', title: '商品编码', width:80 },
{ field: 'frombatchnumber', title: '商品批号', width:80 },
{ field: 'quantity', title: '数量', width:60 },
{ field: 'reasoncodename', title: '原因代码说明', width:120 },
{ field: 'documentdatetime', title: '创建时间', width:80 },
{ field: 'del_flag', title: '记录状态', width:80,
formatter: function(value,row,index){
if (value=='0'){
return '<a href="javascript:void(0);" style="color: #000000;" οnclick="updateDelFlag('+value+','+row.moveid+');">有效</a>';
}
if (value=='1'){
return '<a href="javascript:void(0);" style="color: #ff0000;" οnclick="updateDelFlag('+value+','+row.moveid+');">无效</a>';
}
}
},
{ field: 'exec_flag', title: '同步状态', width:80,
formatter: function(value,row,index){
if (value=='0'){
return '未同步';
}
if (value=='1'){
return '已同步';
}
}
}
]]
});
/* 选择ERP商品信息 */
$("#select_erp_win").window({
title:'选择ERP商品信息',
width:640,
height:400,
modal:true
}).window("close");
$("#select_erp_tab").datagrid({
url:"/portal/queryerpgoodsAction.do",
loadMsg:'加载中...',
singleSelect:true,
pagination:true,
pageSize:10,
pageNumber:1,
columns:[[
{field:'com_goods_id',title:'com_goods_id',width:100,checkbox:true},
{field:'goods_opcode',title:'ERP商品操作码',width:100},
{field:'goods_name',title:'ERP商品名称',width:100},
{field:'goods_desc',title:'ERP商品规格',width:100},
{field:'product_location',title:'ERP商品厂商',width:100},
{field:'unit_name',title:'ERP商品单位',width:75},
{field:'package_num',title:'ERP商品包装数',width:75}
]]
});
/* 选择商品批号 */
$("#select_batchnumber_win").window({
title:'选择ERP商品信息',
width:480,
height:400,
modal:true
}).window("close");
$("#select_batchnumber_tab").datagrid({
url:"/portal/queryerpGoodsBatchNumberAction.do",
loadMsg:'加载中...',
singleSelect:true,
pagination:true,
pageSize:10,
pageNumber:1,
columns:[[
{field:'com_lot_id',title:'com_lot_id',width:100,checkbox:true},
{field:'lot_no',title:'商品批号',width:100},
{field:'produce_date',title:'生效日期',width:150},
{field:'expire_date',title:'到期日期',width:150}
]]
});
/* 移动类型改变启用原因代码 */
$('#tb_movement_code').combobox({
onSelect: function(record){
var value = $(this).combobox('getValue');
$('#tb_reasoncode').combobox({
url:'/portal/getAllParameterAction.do?type=reason&movement_types='+value,
valueField:'reason_code',
textField:'reason_name'
});
$("#tb_reasoncode").combobox("enable");
}
});
});
/* 查询数据条件 */
function checkInputQuery(){
var startDate = $('#startDate').datebox('getValue');
var endDate = $('#endDate').datebox('getValue');
var movingCode = $('#movement_ode').combobox('getValue');
$('#goods_tab').datagrid('options').url='/portal/queryGoodsMovementAction.do';
$('#goods_tab').datagrid('load',{
startDate:startDate,
endDate:endDate,
movingCode:movingCode,
});
}
/* 修改记录状态 */
function updateDelFlag(value,row){
$.ajax({
method : 'post',
url : '/portal/updateGoodStatusAction.do',
data:{
type : "del",
moveid : row,
del_flag : value
},
async : false,
dataType : 'json',
success : function(data) {
if(data){
$('#goods_tab').datagrid('reload');
}else{
$.messager.alert('提示',"更改记录状态失败!");
}
},
error : function() {
$.messager.alert('异常','更改记录状态异常!');
}
});
}
/* 修改同步状态,单条或多条 */
function updateExecFlag(){
var checkedItems = $('#goods_tab').datagrid('getSelections');
var moveid = [];
$.each(checkedItems, function(index, item){
moveid.push(item.moveid);
});
var str =moveid.toString();
if(moveid!=""){
$.ajax({
method : 'post',
url : '/portal/updateGoodStatusAction.do',
data:{
type : "exec",
moveids : str
},