首页 > 其他 > 详细

easyui框架的开发纪要

时间：2020-12-12 12:20:50      阅读：25      评论：0      收藏：0      [点我收藏+]

1:初始化表 datagrid

先定义html table id

在此以华夏erp为例 form 下定义一个table ,接着table内又定一个子table  <!-- 商品列表table --> <table id="materialData" 

   <form id="bomHeadFM" method="post" novalidate>
        <table width="100%" style="min-width:1100px;">
            <tr>
                <td style="width:70px;">单据日期</td>
                <td style="padding:5px;width:170px;">
                    <input type="text" name="OperTime" id="OperTime"
                           onClick="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})" class="txt Wdate radius-ui"
                           style="width:155px;" readonly/>
                </td>
                <td style="width:70px;">单据编号</td>
                <td style="padding:5px">
                    <input name="Number" id="Number" class="easyui-validatebox radius-ui"
                           data-options="validType:‘length[2,30]‘" style="width:150px;" readonly/>
                </td>
                <td style="width:80px;"></td>
                <td style="padding:5px;width:170px;"></td>
                <td style="width:70px;"></td>
                <td style="padding:5px"></td>
                <td style="width:100px;"></td>
            </tr>
            <tr>
                <td colspan="9">
                    <!-- 商品列表table -->
                    <table id="materialData" style="top:100px;border-bottom-color:#FFFFFF"></table>
                </td>
            </tr>
            <tr>
                <td colspan="9">
                    <textarea name="Remark" id="Remark" rows="2" cols="2" class="radius-ui" placeholder="暂无备注信息"
                              style="width: 100%; height:35px;"></textarea>
                </td>
            </tr>
        </table>
    </form>

定义完位置之后,初始化id  materialData

  $(‘#materialData‘).datagrid({
            height:345,
            rownumbers: false,
            //动画效果
            animate:false,
            //选中单行
            singleSelect: true,
            collapsible: false,
            pagination: false,
            //交替出现背景
            striped : true,
            showFooter: true,
            columns:[[
                { field: ‘Id‘,width:35,align:"center",hidden:true},
                { field: ‘op‘,align:"center", width:35,
                    formatter:function(value,rec,index) {
                        return ‘<img title="删除" src="/js/easyui/themes/icons/edit_remove.png" style="cursor: pointer;"/>‘;
                    }
                },
                { title: ‘商品类型‘,field: ‘MType‘,editor:‘validatebox‘,width:80},
           /*     { title: ‘仓库名称‘, field: ‘BomId‘, editor:‘validatebox‘, width: 90,
                    formatter: function (value, row, index) {
                        return row.BomName;
                    },
                    editor: {
                        type: ‘combobox‘,
                        options: {
                            valueField: ‘id‘,
                            textField: ‘bomName‘,
                            method: ‘get‘,
                            hasDownArrow: false,
                            url: ‘/bom/findBomByUserId?UBType=UserBom&UBKeyId=‘+kid,
                            onSelect:function(rec){
                                var bomId = rec.id;
                                body =$("#bomHeadFM .datagrid-view2 .datagrid-body");
                                footer =$("#bomHeadFM .datagrid-view2 .datagrid-footer");
                                input = "input[type=text]";
                                var currentRowDom = body.find(".datagrid-row").eq(editIndex);
                                var mId = currentRowDom.find("[field=‘MaterialExtendId‘]").find(".textbox-value").val();
                                if(mId){
                                    var type = "select"; //type 类型：点击 click，选择 select
                                    inOutBomService.findStockNumById(bomId, mId, monthTime, currentRowDom, input, ratioBom, type);
                                }
                            }
                        }
                    }
                },*/
                { title: ‘条码_名称(规格)(型号)(扩展信息)(单位)‘,field: ‘MaterialExtendId‘,width:270,
                    formatter:function(value,row,index){
                        return row.MaterialName;
                    },
                    editor:{
                        type:‘combogrid‘,
                        options:{
                            url: "/material/findBySelect",
                            idField:‘Id‘,
                            textField:‘MaterialName‘,
                            method:‘get‘,
                            pagination: true,
                            mode: ‘remote‘,
                            hasDownArrow: false,
                            panelWidth: 630, //下拉框的宽度
                            panelHeight: 380,//下拉框的高度
                            columns:[[
                                {field:‘mBarCode‘,title:‘条码‘,width:120},
                                {field:‘name‘,title:‘名称‘,width:140},
                                {field:‘standard‘,title:‘规格‘,width:80},
                                {field:‘model‘,title:‘型号‘,width:80},
                                {field:‘unit‘,title:‘单位‘,width:60},
                                {field:‘stock‘,title:‘库存‘,width:50},
                                {field:‘expand‘,title:‘扩展信息‘,width:80}
                            ]],
                            onBeforeLoad: function(param){
                             /*   var edBom = $(‘#materialData‘).datagrid(‘getEditor‘, {index:editIndex,field:‘BomId‘});
                                if(edBom) {
                                    param.bomId =  $(edBom.target).combobox(‘getValue‘);
                                }*/
                                param.mpList = mPropertyList; //商品属性
                            },
                            onLoadSuccess: function (rec) {
                                if(rec && rec.total==1) {
                                    $(".datagrid-body [field=‘mBarCode‘]").click(); //在只有单个商品的时候自动选中
                                    var body =$("#bomHeadFM .datagrid-view2 .datagrid-body");
                                    input = "input[type=text]";
                                    var currentRowDom = body.find(".datagrid-row").eq(editIndex);
                                    currentRowDom.find("[field=‘OperNumber‘]").find(input).focus().select();
                                }
                            },
                            onSelect:function(index, rowData){
                                inOutBomService.materialSelect(rowData,monthTime);
                            }
                        }
                    }
                },
                { title: ‘库存‘,field: ‘Stock‘,editor:‘validatebox‘,width:50},
                { title: ‘单位‘,field: ‘Unit‘,editor:‘validatebox‘,width:60},
                { title: ‘数量‘,field: ‘OperNumber‘,editor:‘validatebox‘,width:60},
                { title: ‘单价‘,field: ‘UnitPrice‘,editor:‘validatebox‘,width:60},
                { title: ‘金额‘,field: ‘AllPrice‘,editor:‘validatebox‘,width:75},
                { title: ‘备注‘,field: ‘Remark‘,editor:‘validatebox‘,width:100}
            ]],
            toolbar:[
                {
                    id:‘append‘,
                    text:‘新增行‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        inOutBomService.append(); //新增行
                    }
                },
                {
                    id:‘appendBom‘,
                    text:‘新增仓库‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        inOutBomService.appendBom(); //新增仓库
                    }
                },
                {
                    id:‘appendMaterial‘,
                    text:‘新增商品‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        js.addTabPage(null, "商品信息", "/pages/materials/material.html");
                    }
                }
            ],
            onLoadError:function() {
                $.messager.alert(‘页面加载提示‘,‘页面加载异常，请稍后再试！‘,‘error‘);
                return;
            }
        });

 

 

 

 接下来

load data

$("#materialData").datagrid(‘loadData‘,data);
可以通过ajax请求的方式获取某单子的商品列表
   $.ajax({
            type:"get",
            url: ‘/bomItem/getDetailList‘,
            data: {
                headerId: bomHeadID,
                mpList: mPropertyList
            },
            dataType: "json",
            success: function (res) {
                if(res && res.code === 200) {
                    var data = res.data;
                    var AllPrice = 0;
                    var TaxLastMoney = 0;
                    var DiscountMoney = $("#DiscountMoney").val()-0; //优惠金额
                    var DiscountLastMoney = $("#DiscountLastMoney").val()-0; //优惠后金额
                    if(type === "edit") {
                        AllPrice = TotalPrice;
                        TaxLastMoney = DiscountMoney + DiscountLastMoney;
                    }
                    var array = [];
                    array.push({
                        "AllPrice": AllPrice,
                        "TaxLastMoney": TaxLastMoney
                    });
                    data.footer = array;
                    $("#materialData").datagrid(‘loadData‘,data);
                    $("#bomHeadFM .datagrid-view2 .datagrid-footer").find("[field=‘op‘] img").hide();
                    if(type === "add") {
                        $("#bomHeadDlg #append").click(); //新增行
                    } else if(type === "edit") {
                        for(var i=0;i<data.rows.length;i++){
                            $(‘#materialData‘).datagrid(‘selectRow‘, i).datagrid(‘beginEdit‘, i);
                            inOutBomService.autoReckon();
                        }
                    }
                }
            },
            error:function() {
                $.messager.alert(‘查询提示‘,‘查询数据后台异常，请稍后再试！‘,‘error‘);
            }
        });

在新增商品的页面功能中就不需要ajax请求了,只需新增行的功能

 

技术分享图片


2: table grid窗口加工具栏
   var tableToolBar = [
            {
                id:‘addBomHead‘,
                text:‘增加‘,
                iconCls:‘icon-add‘,
                handler:function() {
                    addBomHead();
                }
            },
            {
                id:‘deleteBomHead‘,
                text:‘删除‘,
                iconCls:‘icon-remove‘,
                handler:function() {
                    inOutBomService.batDeleteBomHead();
                }
            }
        ];

在datagrid 中加入

$(‘#tableData‘).datagrid({
...........
 toolbar:tableToolBar,
......}

技术分享图片

 

 

再理一下这个组装单界面的逻辑 主页面如下

技术分享图片

 

第一步定义 tablePanel ,表的面板 ,其中包括搜索区域那部分定义, 然后初始化一个表的id 

 <table id="tableData" style="top:300px;border-bottom-color:#FFFFFF"></table>

这个tabledata 是一个datagrid 表格 ,其初始化 在html代码的下边js初始化方法中

技术分享图片

 

下边就是tabledata 的初始化,  渲染的是一个 订单主页的表头 ,大家都知道一个订单有主订单 和子商品分两个表存储. 此页就是显示订单列表.点击查看就可以查看此订单里的商品了

 

 技术分享图片

 

 

定义完datagrid后还需要对这个 grid 进行加载数据,  加载数据是通过ajax 方式 加载的

上边是在html中定义的,接下来加载数据 不在这了,跑到另外一个js内咯,可能嫌弃代码在此堆着太多了吧 

技术分享图片

 

对担心数据较多加了分页功能,  -->showBomHeadDetails  这个erp 定义这个head 为主的意思,不是头, 搞得概念总是被混淆, head 一直是在表头里边见的比较多,主订单 用head 实在是绕啊

ininPager: function () {
            var self = this;
            try {
                var opts = $("#tableData").datagrid(‘options‘);
                var pager = $("#tableData").datagrid(‘getPager‘);
                pager.pagination({
                    onSelectPage:function(pageNum, pageSize) {
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination(‘refresh‘, {
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });
                        self.showBomHeadDetails(pageNum,pageSize);
                    }
                });
            }
            catch (e) {
                $.messager.alert(‘异常处理提示‘,"分页信息异常 :  " + e.name + ": " + e.message,‘error‘);
            }
        },

下边终于找到 ajax 请求和 $("#tableData").datagrid  load数据的地方.最终这条线算是完成了, 整个页面有这些可以显示出来了.

 

//显示bomhead 主 列表
        showBomHeadDetails: function (pageNo,pageSize) {
            var materialParam = $.trim($("#searchMaterial").val());
            var beginTime = $.trim($("#searchBeginTime").val());
            var endTime = $.trim($("#searchEndTime").val());
            if(beginTime) {
                beginTime = beginTime + ‘ 00:00:00‘;
            }
            if(endTime) {
                endTime = endTime + ‘ 23:59:59‘;
            }
            $.ajax({
                type: "get",
                url: "/bomHead/list",
                dataType: "json",
                data: ({
                    search: JSON.stringify({
                        type: listType,
                        subType: listSubType,
                        roleType: roleType,
                        status: "",
                        number: $.trim($("#searchNumber").val()),
                        beginTime: beginTime,
                        endTime: endTime,
                        materialParam: materialParam,
                        bomIds: bomString
                    }),
                    currentPage: pageNo,
                    pageSize: pageSize
                }),
                success: function (res) {
                    if(res && res.code === 200){
                        if(res.data && res.data.page) {
                            $("#tableData").datagrid(‘loadData‘, res.data.page);
                        }
                    }
                },
                //此处添加错误处理
                error: function () {
                    $.messager.alert(‘查询提示‘, ‘查询数据后台异常，请稍后再试！‘, ‘error‘);
                    return;
                }
            });
        },

接下来就是主table 的toolbar 工具栏上的增加按钮了

技术分享图片

 

 

 html代码部分还有一部分定义子产品列表的部分,应该是隐藏状态

//新增窗口使用
<div id="bomHeadDlg" class="easyui-dialog" style="padding:10px 20px;" fit="true"
     closed="true" buttons="#dlg-buttons" modal="true" cache="false" collapsible="false" closable="true">
    <form id="bomHeadFM" method="post" novalidate>
        <table width="100%" style="min-width:1100px;">
            <tr>
                <td style="width:70px;">单据日期</td>
                <td style="padding:5px;width:170px;">
                    <input type="text" name="OperTime" id="OperTime"
                           onClick="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})" class="txt Wdate radius-ui"
                           style="width:155px;" readonly/>
                </td>
                <td style="width:70px;">单据编号</td>
                <td style="padding:5px">
                    <input name="Number" id="Number" class="easyui-validatebox radius-ui"
                           data-options="validType:‘length[2,30]‘" style="width:150px;" readonly/>
                </td>
                <td style="width:80px;"></td>
                <td style="padding:5px;width:170px;"></td>
                <td style="width:70px;"></td>
                <td style="padding:5px"></td>
                <td style="width:100px;"></td>
            </tr>
            <tr>
                <td colspan="9">
                    <!-- 商品列表table -->
                    <table id="materialData" style="top:100px;border-bottom-color:#FFFFFF"></table>
                </td>
            </tr>
            <tr>
                <td colspan="9">
                    <textarea name="Remark" id="Remark" rows="2" cols="2" class="radius-ui" placeholder="暂无备注信息"
                              style="width: 100%; height:35px;"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>

上边的部分就是新增按钮要调用和显示的部分

点击按钮 ,主窗体的toolbar中定义了,然后绑定的  入口 addBomHead();

   var tableToolBar = [
            {
                id:‘addBomHead‘,
                text:‘增加‘,
                iconCls:‘icon-add‘,
                handler:function() {
                    addBomHead();
                }
            },

巴拉巴拉初始化了很多最终 

$(‘#bomHeadDlg‘).show().dialog(‘open‘).dialog(‘setTitle‘,‘<img src="/js/easyui/themes/icons/edit_add.png"/>&nbsp;增加‘ + addTitle);

技术分享图片

 

 

 

这个 bomHeadDlg 只是个div 的id 不是table的, 这个show 应该是说把这个div内的内容搬到一个新的窗体中,然后在初始化.我在此脑海里混淆了dialog 和grid   dialog是窗体 grid 是表单,要理智的分开

  <table id="materialData" style="top:100px;border-bottom-color:#FFFFFF"></table>
此时代码跑到初始化那

技术分享图片

 

 相似的datagrid 初始化场景

function initTableData_material(type,TotalPrice) {
        var self = this;
        var body,footer,input; //定义表格和文本框
        var ratioBom = 1; //比例-仓库用
        var monthTime = getNowFormatMonth();
        $(‘#materialData‘).datagrid({
            height:345,
            rownumbers: false,
            //动画效果
            animate:false,
            //选中单行
            singleSelect: true,
            collapsible: false,
            pagination: false,
            //交替出现背景
            striped : true,
            showFooter: true,
            columns:[[
                { field: ‘Id‘,width:35,align:"center",hidden:true},
                { field: ‘op‘,align:"center", width:35,
                    formatter:function(value,rec,index) {
                        return ‘<img title="删除" src="/js/easyui/themes/icons/edit_remove.png" style="cursor: pointer;"/>‘;
                    }
                },
                { title: ‘商品类型‘,field: ‘MType‘,editor:‘validatebox‘,width:80},
           /*     { title: ‘仓库名称‘, field: ‘BomId‘, editor:‘validatebox‘, width: 90,
                    formatter: function (value, row, index) {
                        return row.BomName;
                    },
                    editor: {
                        type: ‘combobox‘,
                        options: {
                            valueField: ‘id‘,
                            textField: ‘bomName‘,
                            method: ‘get‘,
                            hasDownArrow: false,
                            url: ‘/bom/findBomByUserId?UBType=UserBom&UBKeyId=‘+kid,
                            onSelect:function(rec){
                                var bomId = rec.id;
                                body =$("#bomHeadFM .datagrid-view2 .datagrid-body");
                                footer =$("#bomHeadFM .datagrid-view2 .datagrid-footer");
                                input = "input[type=text]";
                                var currentRowDom = body.find(".datagrid-row").eq(editIndex);
                                var mId = currentRowDom.find("[field=‘MaterialExtendId‘]").find(".textbox-value").val();
                                if(mId){
                                    var type = "select"; //type 类型：点击 click，选择 select
                                    inOutBomService.findStockNumById(bomId, mId, monthTime, currentRowDom, input, ratioBom, type);
                                }
                            }
                        }
                    }
                },*/
                { title: ‘条码_名称(规格)(型号)(扩展信息)(单位)‘,field: ‘MaterialExtendId‘,width:270,
                    formatter:function(value,row,index){
                        return row.MaterialName;
                    },
                    editor:{
                        type:‘combogrid‘,
                        options:{
                            url: "/material/findBySelect",
                            idField:‘Id‘,
                            textField:‘MaterialName‘,
                            method:‘get‘,
                            pagination: true,
                            mode: ‘remote‘,
                            hasDownArrow: false,
                            panelWidth: 630, //下拉框的宽度
                            panelHeight: 380,//下拉框的高度
                            columns:[[
                                {field:‘mBarCode‘,title:‘条码‘,width:120},
                                {field:‘name‘,title:‘名称‘,width:140},
                                {field:‘standard‘,title:‘规格‘,width:80},
                                {field:‘model‘,title:‘型号‘,width:80},
                                {field:‘unit‘,title:‘单位‘,width:60},
                                {field:‘stock‘,title:‘库存‘,width:50},
                                {field:‘expand‘,title:‘扩展信息‘,width:80}
                            ]],
                            onBeforeLoad: function(param){
                             /*   var edBom = $(‘#materialData‘).datagrid(‘getEditor‘, {index:editIndex,field:‘BomId‘});
                                if(edBom) {
                                    param.bomId =  $(edBom.target).combobox(‘getValue‘);
                                }*/
                                param.mpList = mPropertyList; //商品属性
                            },
                            onLoadSuccess: function (rec) {
                                if(rec && rec.total==1) {
                                    $(".datagrid-body [field=‘mBarCode‘]").click(); //在只有单个商品的时候自动选中
                                    var body =$("#bomHeadFM .datagrid-view2 .datagrid-body");
                                    input = "input[type=text]";
                                    var currentRowDom = body.find(".datagrid-row").eq(editIndex);
                                    currentRowDom.find("[field=‘OperNumber‘]").find(input).focus().select();
                                }
                            },
                            onSelect:function(index, rowData){
                                inOutBomService.materialSelect(rowData,monthTime);
                            }
                        }
                    }
                },
                { title: ‘库存‘,field: ‘Stock‘,editor:‘validatebox‘,width:50},
                { title: ‘单位‘,field: ‘Unit‘,editor:‘validatebox‘,width:60},
                { title: ‘数量‘,field: ‘OperNumber‘,editor:‘validatebox‘,width:60},
                { title: ‘单价‘,field: ‘UnitPrice‘,editor:‘validatebox‘,width:60},
                { title: ‘金额‘,field: ‘AllPrice‘,editor:‘validatebox‘,width:75},
                { title: ‘备注‘,field: ‘Remark‘,editor:‘validatebox‘,width:100}
            ]],
            toolbar:[
                {
                    id:‘append‘,
                    text:‘新增行‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        inOutBomService.append(); //新增行
                    }
                },
                {
                    id:‘appendBom‘,
                    text:‘新增仓库‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        inOutBomService.appendBom(); //新增仓库
                    }
                },
                {
                    id:‘appendMaterial‘,
                    text:‘新增商品‘,
                    iconCls:‘icon-add‘,
                    handler:function() {
                        js.addTabPage(null, "商品信息", "/pages/materials/material.html");
                    }
                }
            ],
            onLoadError:function() {
                $.messager.alert(‘页面加载提示‘,‘页面加载异常，请稍后再试！‘,‘error‘);
                return;
            }
        });
        $.ajax({
            type:"get",
            url: ‘/bomItem/getDetailList‘,
            data: {
                headerId: bomHeadID,
                mpList: mPropertyList
            },
            dataType: "json",
            success: function (res) {
                if(res && res.code === 200) {
                    var data = res.data;
                    var AllPrice = 0;
                    var TaxLastMoney = 0;
                    var DiscountMoney = $("#DiscountMoney").val()-0; //优惠金额
                    var DiscountLastMoney = $("#DiscountLastMoney").val()-0; //优惠后金额
                    if(type === "edit") {
                        AllPrice = TotalPrice;
                        TaxLastMoney = DiscountMoney + DiscountLastMoney;
                    }
                    var array = [];
                    array.push({
                        "AllPrice": AllPrice,
                        "TaxLastMoney": TaxLastMoney
                    });
                    data.footer = array;
                    $("#materialData").datagrid(‘loadData‘,data);
                    $("#bomHeadFM .datagrid-view2 .datagrid-footer").find("[field=‘op‘] img").hide();
                    if(type === "add") {
                        $("#bomHeadDlg #append").click(); //新增行
                    } else if(type === "edit") {
                        for(var i=0;i<data.rows.length;i++){
                            $(‘#materialData‘).datagrid(‘selectRow‘, i).datagrid(‘beginEdit‘, i);
                            inOutBomService.autoReckon();
                        }
                    }
                }
            },
            error:function() {
                $.messager.alert(‘查询提示‘,‘查询数据后台异常，请稍后再试！‘,‘error‘);
            }
        });
    }

总体就这么理完了.  

 

华夏erp 功能较为完善,细节功能处理的也比较多,所以代码迭代了一 堆堆,js代码在html 有定义,在单独的js里边还有,总之理清其逻辑需要跳来跳去的.需要一个循序渐进的过程.当前看来web支撑较为全面的功能,

少不了代码的堆叠啊.

easyui框架的开发纪要

原文：https://www.cnblogs.com/zuochanzi/p/14124116.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！