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+"' οnclick='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+"' οnclick='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;
    }