EasyUI Tabs全攻略

完全的实例，主要涉及EasyUi DataGrid和tabs两大功能，其中涉及多种知识点：根据页面地址获取参数，datagrid内部传参和列显示，tabs选项卡的添加和初始化，格式化列，字符的截取以及循环，按钮的多条件禁用启用，json字符串的拼接及解析，ajax等功能细节。

如需详细的EasyUi DataGrid请参考推荐文章

前端JS：

<script type="text/javascript">
$(function(){
var url = window.location;//获取上一jsp页面的传值
function getUrlParam(url,name){
var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");//name的值
var matcher = pattern.exec(url);
var items = null;
if(matcher != null){
try{
items = decodeURIComponent(decodeURIComponent(matcher[1]));
}catch(e){
try{
items = decodeURIComponent(matcher[1]);
}catch(e){
items = matcher[1];
}
}
}
return items;
}
var batch_name = getUrlParam(url,'name');
$("#batch_name").val(batch_name);
//加载订单库存信息
$("#dgStock").datagrid({
url:"/portal/listGskOrderDetailAction.do",
loadMsg:'加载中...',
singleSelect:true,
queryParams: {
type: 'stock',
batch_name: batch_name
},
columns:[[
{field:'goods_opcode',title:'品种',width:80},
{field:'goods_name',title:'名称',width:155},
{field:'qty',title:'订单',width:50},
{field:'stock_qty',title:'库存',width:50}
]]
});
//查询选项卡
$.ajax({
method : 'post',
url : '/portal/listGskOrderDetailAction.do',
data:{
type: 'order',
batch_name: batch_name
},
async : false,
dataType : 'json',
success : function(data) {
if(data){
$.each(data,function(index,item){
//添加选项卡
addTabs(item.orderno,item.client,index);
});
}else{
$.messager.alert('提示',"订单信息加载失败！");
}
},
error : function() {
$.messager.alert('异常','订单信息加载异常！');
}
});

function addTabs(orderno,client,index){
$("#tt").tabs('add',{
title:orderno+":"+client,
//content:'<table id="dg'+index+'" ><input id="in'+index+'" type="hidden" value="'+orderno+'"/></table>',
content:'<table id="dg'+orderno+'" ></table>',//添加表格用于<span style="font-family: Arial, Helvetica, sans-serif;">datagrid</span><span style="font-family: Arial, Helvetica, sans-serif;">实时加载</span>
scrollIncrement:300,
fit: true,
closable:false
});
}
var valid=true;//是否可以发送订单（按钮状态）
//初始化点击事件
$('#tt').tabs({
border:false,
onSelect:function(title,index){
var orderno = title.split(":")[0];
$("#title_tb").val(title);
//加载该选项卡订单信息
$("#dg"+orderno).datagrid({
url:"/portal/listGskOrderDetailAction.do",
loadMsg:'加载中...',
singleSelect:true,
toolbar: [{//在页面创建的话会出现问题（关闭选项卡后菜单也会关闭）
text: '创建销售订单（TO_GSK）订单',
handler: function(){createSaleOrders();}
}],
fit: true,
queryParams: {
type: 'info',
orderno: orderno,
batch_name: batch_name
},
columns:[[
{field:'szedct',title:'类型',width:50,
formatter: function(value,row,index){//格式化列
if (value=='SO'){
return '销售';
}
if (value=='SC'){
return '退货';
}
if (value=='SZ'){
return '赠样';
}
}
},
{field:'field1',title:'GSK文件_客户名称',width:150},
{field:'szdate',title:'日期',width:80},
{field:'szvr01',title:'客户订单号',width:80},
{field:'szlitm',title:'GSK的SKU号',width:100},
{field:'szdsc1',title:'GSK的SKU描述',width:200},
{field:'szuorg',title:'数量',width:60},
{field:'szlotn',title:'批号',width:60},
{field:'client_opcode',title:'客户码',width:100},
{field:'goods_ids',title:'商品码集合',width:200,hidden: true},
{field:'goods_opcode',title:'商品码',width:200,
formatter: function(value,row,index){
//多个商品码
var ids = row.goods_ids;
if(ids != ''){
var array = ids.split(",");//后台数据（以,分割成数组）
var str="";
for (i in array){//循环取出数据，添加单选按钮并默认
if(array[i] == value){
str += "<input type='radio' name='"+row.id+"' onclick='checkStock("+row.szuorg+","+array[i]+","+row.id+","+row.client_id+",\""+row.szvr01+"\");' value='"+array[i]+"' checked='checked' />"+array[i];
}else{
str += "<input type='radio' name='"+row.id+"' onclick='checkStock("+row.szuorg+","+array[i]+","+row.id+","+row.client_id+",\""+row.szvr01+"\");' value='"+array[i]+"' />"+array[i];
}
}
return str;
}else{//给按钮状态赋值
valid=false;
return value;
}
}
},
{field:'sale_valid',title:'销售关系',width:60,
formatter: function(value,row,index){
//判断关系并添加ID为多商品码查询用
if (value=='0'){
valid=false;
return '<span id="sale_valid'+row.id+'"><img src="/portal/images/X5.gif" alt="" /><input name="sale_vlid" type="hidden" value="0" /></span>';
}
if (value=='1'){
return '<span id="sale_valid'+row.id+'"><img src="/portal/images/X3.gif" alt="" /><input name="sale_vlid" type="hidden" value="1" /></span>';
}
}
},
{field:'goods_stock',title:'库存',width:60,
formatter: function(value,row,index){
var szuorg = row.szuorg;
//判断库存信息并添加ID为多商品码查询用
if(value>=szuorg){
return "<span id='stock"+row.id+"'><font color='black'>"+value+"</font></span>";
}else{
valid=false;
return "<span id='stock"+row.id+"'><font color='red' >"+value+"</font></span>";
}
//取其他列进行判断
/* var rows = $('#dg'+indexMain).datagrid('getRows');
var total = 0;
for (var i = 0; i < rows.length; i++) {
total = rows[i]['szuorg'];
if(value>=total){
return "<font color='black'>"+value+"</font>";
}else{
valid=false;
return "<font color='red' >"+value+"</font>";
}
}  */
}
}
]],onLoadSuccess : function(){
if(valid){//禁用启用按钮
$("#tba").linkbutton("enable");//enable
}else{
$("#tba").linkbutton("disable");
}
}
});

}
});

});
//单选按钮检查库存和关系
function checkStock(szuorg,opcode,id,client,order){
$.ajax({
url:"/portal/listGskOrderStockDetailAction.do",
type:'post',
data:{goods_opcode:opcode,client_id:client},
dataType:"json",
success:function(data){
var s = parseInt(data.stack);
if(s >= szuorg){
$("#stock"+id).html("<font color='black' name='stock_color'>"+data.stack+"</font>");
}else{
$("#stock"+id).html("<font color='red' name='stock_color'>"+data.stack+"</font>");
}
if(data.sale_valid > 0){
$("#sale_valid"+id).html("<img src='/portal/images/X3.gif' /><input name='sale_valid' type='hidden' value='1' />");
}else{
$("#sale_valid"+id).html("<img src='/portal/images/X5.gif' /><input name='sale_valid' type='hidden' value='0' />");
}
//检查库存和关系是否启用按钮
checkError();
},
error:function(){
alert("操作失败,请重试！");
}
});
}

function checkError(){
var plan = true;
$("input[name='sale_valid']").each(function(index,item){//验证关系
if($(this).val()!=1){
plan = false;
}
});
$("font[name='stock_color']").each(function(index,item){//验证库存
var color = ($(this).attr("color"));
if(color == "red"){
plan = false;
}
});
if(plan){
$("#tba").linkbutton("enable");
}else{
$("#tba").linkbutton("disable");
}
}

function createSaleOrders(){
var title = $("#title_tb").val();
var orderno = title.split(":")[0];//以：分割的第1个参数
if(confirm('将 ,     '+title+'      订单发送给GSK确认!')){
var values='[';
var checked = $("input:checked");//检查单选框并拼接为json格式
if(checked.length<1){
values='';
}else{
for(var i=0;i<checked.length;i++){
values+='{code:"'+checked[i].value+'",id:"'+checked[i].name+'"},';
}
values=values.substring(0,values.length-1);
values+=']';
}
var batch_name = $("#batch_name").val();
$.ajax({
method : 'post',
url : '/portal/createGskOrderAction.do',
data:{
goods: values,
orderno: orderno,
batch_name : batch_name
},
//async : false,
dataType : 'json',
success : function(data) {
if(data){
$.messager.alert('提示',"创建销售订单成功！");
$('#tt').tabs('close',title);
$("#tba_span").css("display",true);
}else{
$.messager.alert('提示',"创建销售订单失败！");
}
},
error : function() {
$.messager.alert('异常','创建销售订单异常！');
}
});
}
}

</script>

JSP:

<body >
<div id="cc" class="easyui-layout" data-options="fit:true">
<input type="hidden" id="batch_name" />
<input type="hidden" id="title_tb" />
<div data-options="region:'west',title:'订单商品库存',split:true" style="width:350px;">
<table id="dgStock"></table>
</div>
<div data-options="region:'center',title:'订单详细'" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" fit="true"></div>
</div>
</div>
</body>

STRUTS：

<span style="white-space:pre">	</span>    <action path="/listGskOrderAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderAction" validate="false">
<forward name="" path="" />
</action>
<action path="/listGskOrderDetailAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderDetailAction" validate="false">
<forward name="" path="" />
</action>
<action path="/listGskOrderStockDetailAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderStockDetailAction" validate="false">
<forward name="" path="" />
</action>
<action path="/createGskOrderAction" scope="request" type="portal.sysweb.gsk2.action.CreateGskOrderAction" validate="false">
<forward name="" path="" />
</action>

Action:

public class ListGskOrderAction extends Action {

@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
throws Exception {
ActionForm_UserInfo userInfo = (ActionForm_UserInfo) request
.getSession().getAttribute("UserInfo");
int page = Integer.parseInt(request.getParameter("page"));
int rows = Integer.parseInt(request.getParameter("rows"));
Gsk2Dao dao = new Gsk2Dao();
Pagination pagination = dao.listUploadGskOrder(page,rows,userInfo.getUserid(),userInfo.getCompany_id());
JSONObject json = new JSONObject();
json.put("total", pagination.getMaxElements());
json.put("rows", pagination.getPaginationList());
json = JSONObject.fromObject(json);
response.setCharacterEncoding("utf-8");
response.getWriter().write(json.toString());
response.getWriter().flush();
response.getWriter().close();
return null;
}

}

public class ListGskOrderDetailAction extends Action{
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
throws Exception {
ActionForm_UserInfo userInfo = (ActionForm_UserInfo) request
.getSession().getAttribute("UserInfo");
List<Hashtable> list = null;
Gsk2Dao dao = new Gsk2Dao();
String batch_name = request.getParameter("batch_name");
String type = request.getParameter("type");
if("1".equals(request.getParameter("update_flag")))
new InterfaceFactory().dealUploadGSKInterface(null,null,batch_name,null);
if(type.equals("stock"))
list = dao.listGskOrderCheckStock(batch_name);
if(type.equals("order"))
list = dao.listUploadGskOrderDetail(userInfo.getUserid(), userInfo.getCompany_id(),batch_name);
if(type.equals("info")){
String orderno = request.getParameter("orderno");
list = dao.listUploadGskOrderInfo(userInfo.getUserid(), userInfo.getCompany_id(),batch_name,orderno);
}
JSONArray arr = JSONArray.fromObject(list);
response.setCharacterEncoding("utf-8");
response.getWriter().write(arr.toString());
response.getWriter().flush();
response.getWriter().close();
return null;
}
}

public class ListGskOrderStockDetailAction extends Action{
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String goods_opcode = request.getParameter("goods_opcode");
String client_id = request.getParameter("client_id");
Gsk2Dao dao = new Gsk2Dao();
ActionForm_UserInfo actionForm_UserInfo = (ActionForm_UserInfo) request
.getSession().getAttribute("UserInfo");
String company_id = actionForm_UserInfo.getCompany_id();
//String stack = dao.queryGoodsStackByCompanyId(goods_opcode,company_id);
String stack = dao.queryGoodsStackByCompanyId(goods_opcode);
int sale_valid = dao.queryGoodsCompanyRefByCompanyId(client_id, company_id, goods_opcode);
StringBuffer strb = new StringBuffer();
strb.append("{")
.append("\"stack\":").append("\""+stack+"\"")
.append(",\"sale_valid\":").append("\""+sale_valid+"\"")
.append("}");
response.getWriter().write(strb.toString());
response.getWriter().flush();
response.getWriter().close();
return null;
}
}

public class CreateGskOrderAction extends Action {

@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
throws Exception {
ActionForm_UserInfo actionForm_UserInfo = (ActionForm_UserInfo) request
.getSession().getAttribute("UserInfo");
String msg = "false";
Gsk2Dao dao = new Gsk2Dao();
try {
String order_no = request.getParameter("orderno");
String batch_name = request.getParameter("batch_name");
String jsonStr = request.getParameter("goods");
if(null != jsonStr && !"".equals(jsonStr)){
JSONArray jsonArray = JSONArray.fromObject(jsonStr);
for(int i=0;i<jsonArray.size(); i++){
JSONObject jsonJ = jsonArray.getJSONObject(i);
String goods_opcode = jsonJ.getString("code");
int id = jsonJ.getInt("id");
int goods_id = dao.queryGoodsIdByCode(goods_opcode);
boolean flag = dao.updateGskOrderCodeAndGoodIdById(goods_id, goods_opcode, id);
}
}
dao.createGskOrder(order_no, batch_name);
msg="true";
} catch (Exception ex1) {
ex1.printStackTrace();
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(msg.toString());
response.getWriter().flush();
response.getWriter().close();
return null;
}

}

Dao:

public List listUploadGskOrderInfo(String user_id, String sys_provide_id,
String batch_name,String orderid) {
String sql = " select * " + " from v_gsk_order t "
+ " where t.USER_ID = '" + user_id + "' "
+ " and t.COMPANY_ID = '" + sys_provide_id + "' "
+ " and t.EXEC_FLAG = 'UPLOAD' " + " and t.BATCH_NAME = '"
+ batch_name + "' and t.SZVR01 = '"+orderid+"' order by t.SZVR01,t.SZEDCT,t.ID";
//System.out.println("listUploadGskOrderInfo:"+sql);
List list = null;
try {
DataManage db = new DataManage();
list = db.executeQuerys(sql);
} catch (Exception ex) {
ex.printStackTrace();
}
return list;
}

public boolean updateGskOrderCodeAndGoodIdById(int goods_id,String goods_opcode,int id){
String strSql = "update gsk_order gor set "
+ "gor.szlitm='"+goods_opcode+"',gor.goods_id='"+goods_id+"',gor.goods_opcode='"+goods_opcode+"'"
+ " where gor.id='"+id+"'";
try {
DataManage db = new DataManage();
System.out.println("updateGskOrderCodeAndGoodIdById："+strSql);
db.exeUpdate(strSql);
return true;
} catch (Exception ex) {
ex.printStackTrace();
}
return false;
}

public int queryGoodsCompanyRefByCompanyId(String client_id,String company_id,String goods_opcode){
String sql = "select count(*) from  goods_company_ref gcr "
+ "where  gcr.client_id = "+client_id+" "
+ "and gcr.provide_id = "+company_id+" "
+ "and gcr.goods_id = (select cg.goods_id  "
+ "from com_goods cg "
+ "where cg.goods_opcode = '"+goods_opcode+"' "
+ "and cg.org_id =1001) ";
int num = 0;
DataManage db = null;
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
db = new DataManage();
//System.out.println("queryGoodsCompanyRefByCompanyId："+sql);
conn = db.getConnection();
conn.setAutoCommit(false);
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
if (rs.next()) {
num = rs.getInt(1);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return num;
}