EasyUI+JQuery轻松实现步骤条效果

最新推荐文章于 2022-10-28 18:20:51 发布

我是周洲

最新推荐文章于 2022-10-28 18:20:51 发布

阅读量8.4k

点赞数 3

分类专栏： 2.ZFCG项目文章标签： mvc easyui jquery

本文链接：https://blog.csdn.net/zhou2s_101216/article/details/49854091

版权

2.ZFCG项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

　　最近加入一个新的项目组，组长对我好。。。严厉啊！哼，就给了一天时间看看需求，直接是上手实现功能。但是聪明如我，积极主动的去找组长给我讲了讲框架，大概的懂了懂，一天半的时间实现了一个前台的小功能，给大家展示一把~

　　先来讲一下需求。在我们平时购物的时候，经常是这样一个步骤，下订单，交货款，卖家发货，确认收货，评价。那么如果UI设计上一个进度条，这样用户就可以很清楚的看到自己在哪个位置，需要进行哪些步骤了。

　　再来看看我们项目的前台框架，采用的是EasyUI+MVC，我只需要去写几个JS和view进行互动就OK了，我用了一天的时间来看它整个页面是怎么实现的，基本就是引用一个easyUI的样式，用AJAX进行传值，调用后台的controller中的方法。既然我实现的是一个前台页面的动态效果，就在上一步和下一步上写JQuery方法进行switch选择进行节点的激活和完成。写一个JS的方法来选择控制主体页面的显示和隐藏，我把view写成了几个div,所以我的方法就是几个div显示的跳转。

回顾JQuery的知识点：

　1.窗体加载事件相应的是window.onload的方法

　2.按钮绑定事件有很多种

1）用JS，写一个function放在按钮的onclick的事件上。

2）用JQuery绑定一个匿名函数 $('#btnnext').bind('click', function (){});

　3.增加类和删除类 removeclass和addclass,其中ID和class的区别，在JQuery中ID有#开头

　4.js和JQuery的区别在于，后者用最少的代码表达了最多的意思，后者是前者了更高一层的封装。

　5.AJAX后台传递方法的类型区别 POST和GET，get相对传输的数据量小，通过URL请求来传递用户的传输，post需要提交表单，安全度高。

部分代码展示：

//点击下一步按钮+进度条前进一个的效果---周洲--2015年11月15日
    $('#btnnext').bind('click', function () {

        //判断各个输入框是否验证通过
        if (InputValidate() == false) {
            return;
        }

        //根据当前标题，决定下一步是什么
        var currentTitle = $('#MainContent').panel('options').title;

        if (currentTitle == '填写项目信息') {

            //点击下一步响应滚动条
            $("#li1").removeClass("ui-step-active");   //将活动节点移除
            $("#li1").addClass("ui-step-done");       //增加一个完成的节点
            $("#li2").removeClass("ui-step-line");    //移除一个线
            $("#li2").addClass("ui-step-active");     //增加一个活跃着的节点
            


            $('#NewFile').hide();//制作按钮隐藏
            $('#BidInfo').hide();//基本信息隐藏
            $.get('/InviteBid/GetInviteBidId', { bidType: bidType }, function (data, status) {

                //在招标项目编号文本框中赋值
                $('#InviteBidId').val(data);
                $('#InfoDisplay').show();

            });
            $('#btnback').show();
            ControlContent("#InfoDisplay");
            //$('#btnArea').show();
            //更改标题
            $('#MainContent').panel({
                title: '生成招标编号'
            });
        }
        //如果当前位置为填写项目信息，点击下一步时提交项目基本信息
        if (currentTitle == '生成招标编号') {

            //获得项目基本信息
            var BidProId = $('#InviteBidId').val(); //获得招标编号
            var BidProName = $('#BidProName').val();//获得招标项目名称
            var PurchaseUnit = $('#PurchaseUnit').val();//获得采购单位            
            InviteBidTypeId = $('#comboInviteBidType').combobox('getValue');//获得招标方式Id           
            ItemTypeId = $('#comboItemType').combobox('getValue'); //获得品目类型Id
            var PurchaseAgency = $('#PurchaseAgency').val();//获得采购代理
            var BidOpenTime = $('#BidOpenTime').datebox('getText');//开标时间
            var BidGuaranteCash = $('#BidGuaranteCash').val();//投标保证金
            var SaleStartDate = $('#SaleStartDate').datebox('getText');//获得招标文件发售起始时间
            var SaleEndDate = $('#SaleEndDate').datebox('getText');//获得招标文件发售终止时间

            

            //点击下一步响应滚动条
            $("#li2").removeClass("ui-step-active");   //将活动节点移除
            $("#li2").addClass("ui-step-done");       //增加一个完成的节点
            $("#li3").removeClass("ui-step-line");    //移除一个线
            $("#li3").addClass("ui-step-active");     //增加一个活跃着的节点

            $("#btnback").show();
            ControlContent("#EvaluationBid");
            //提交项目信息数据到Controller
            $.ajax({
                type: 'POST',
                url: '/InviteBid/AddBidZRecord',
                contentType: 'application/json', //必须有,表示提交的数据类型 
                data: JSON.stringify({
                    'BidZRecorder':
                        [{ 'BidProjectId': BidProId, 'BidRecordName': BidProName, 'PurchaseUnit': PurchaseUnit, 'PurchaseAgency': PurchaseAgency, 'SaleStartDate': SaleStartDate, 'SaleEndDate': SaleEndDate, 'BidOpenTime': BidOpenTime, 'BidGuaranteCash': BidGuaranteCash, 'ItemId': ItemTypeId, 'InviteBidId': InviteBidTypeId }]
                }),
                success: function (jsonResult) {
                    $('#InfoDisplay').hide();//编号信息隐藏
                    $('#EvaluationBid').show();//评标方法区域显示
                    //主内容区域标题改为设置评标办法
                    $('#MainContent').panel({
                        title: '设置评标办法'
                    });
                    //评标办法的第一步的文字字体设为红色
                    $('#firstStep').css({ color: 'red' })

                },
                error: function (data) {
                    $.messager.alert('提示', '填写项目信息失败！', 'warning');
                    return;
                }
            });


        }
        else if (currentTitle == '设置评标办法') {
            if ($('#comboEvaluationMethod').combobox('getText') == '') {
                return false;
            }
            if (saveFlag == false) {
                return;
            }

            //获得评标办法的Id
            var BidRecordId = $('#InviteBidId').val(); //获得招标编号

            //点击下一步响应滚动条
            $("#li3").removeClass("ui-step-active");   //将活动节点移除
            $("#li3").addClass("ui-step-done");       //增加一个完成的节点
            $("#li4").removeClass("ui-step-line");    //移除一个线
            $("#li4").addClass("ui-step-active");     //增加一个活跃着的节点
            $("#btnback").show();
            ControlContent('#FinishFile');
            //提交评标办法
            $.ajax({
                type: 'POST',
                url: '/InviteBid/UpdateBidZRecord/?JudgeBidId=' + JudgeBidId + '&BidRecordId=' + BidRecordId,
                //data: JudgeBidId,
                success: function (jsonResult) {

                },
                error: function (data) {
                    $.messager.alert('提示', '评标办法提交失败！', 'warning');
                    return;

                }

            });

            //提交修改分值后的表格中的内容
            //获得表格中的所有行
            var allRows = $('#tg').treegrid('getRoots');
            //获得行数
            var rowsCount = allRows.length;
            //声明一个数组
            var arrayJudgeItems = [];

            //循环遍历所有行，把每一行的记录作为一个对象存到数组中
            for (i = 0; i < rowsCount; i++) {
                //获得第i行记录
                var Row = allRows[i];
                var rowIndex = $('#tg').treegrid('getRowIndex', Row) + 2;
                //实例化一个评分项目对象
                var BidJudgeTable = {
                    RowIndex: rowIndex,
                    JudgeItemName: Row.JudgeItemName,
                    JudgeItemContent: Row.JudgeItemContent,
                    Score: Row.Score
                };
                //在数组中添加对象
                arrayJudgeItems.push(BidJudgeTable);

            }
            //提交数据                
            $.ajax({
                type: 'POST',
                async: false,
                url: '/InviteBid/ReceiveBidJudgeTable',
                contentType: 'application/json', //必须有,表示提交的数据类型                          
                data: JSON.stringify(arrayJudgeItems),
                success: function (result) {
                    //alert("success");
                },
                error: function (data) {

                    //alert("error");
                }
            });

            $('#EvaluationBid').hide();
            $('#btnnext').hide();
            $('#FinishFile').show();
            $('#MainContent').panel({
                title: '生成招标文件'
            });
        }
        else if (currentTitle == '生成招标文件') {

        }


    });



  /*
    *用来控制上一页和下一页的页面转换---周洲---2015年11月15日
   *summary：控制主体页面的显示和隐藏
   *param：  参数showid：要显示的页面的div的id，如"#BidInfo"
   */
    function ControlContent(showid) {
        //主体内容页面的id数组
        var stepContents = new Array("#BidInfo", "#InfoDisplay", "#EvaluationBid", "#FinishFile");
        //循环遍历数组中的div的id值，如果为当前步骤，则将页面内容设为显示，其余设为隐藏
        var contentIndex;//数组中元素的索引值
        for (contentIndex in stepContents) {
            var stepContent = stepContents[contentIndex];//获得元素的值
            if (showid == stepContent) {
                $(stepContent).show();//显示
            }
            else {
                $(stepContent).hide();//隐藏
            }
        }

    }





//点击上一步按钮+进度条效果---周洲--2015年11月15日
    $("#btnback").bind("click", function () {
        //根据当前标题，决定上一步是什么
        var currentTitle = $('#MainContent').panel('options').title;

        switch (currentTitle) {
         
            case "生成招标编号":

                $("#li2").removeClass("ui-step-active");
                $("#li2").addClass("ui-step-line");
                $("#li1").removeClass("ui-step-done");
                $("#li1").addClass("ui-step-active");
                $("#currentTitle").text("填写项目信息");
                ControlContent('#BidInfo');
                $("#btnback").hide();
                $('#btnnext').show();
                $('#MainContent').panel({
                    title: '填写项目信息'
                });
                break;

            case "设置评标方法":
                $("#li3").removeClass("ui-step-active");
                $("#li3").addClass("ui-step-line");
                $("#li2").removeClass("ui-step-done");
                $("#li2").addClass("ui-step-active");
                $("#currentTitle").text("生成招标编号");
                ControlContent('#InfoDisplay');
                $('#btnnext').show();
                $('#MainContent').panel({
                    title: '生成招标编号'
                });
     
                break;

            case "生成招标文件":
                $("#li4").removeClass("ui-step-active");
                $("#li4").addClass("ui-step-line");
                $("#li3").removeClass("ui-step-done");
                $("#li3").addClass("ui-step-active");
                $("#currentTitle").text("设置评标方法");
                ControlContent('#EvaluationBid');
                $('#btnnext').show();
                $('#MainContent').panel({
                    title: '设置评标方法'
                });

                break;
        
            default:

        }
      
    });

视图部分我只展示进度条：

@*步骤条*@
    <div class="row" style="margin-top:3%">
        <div class="col-md-2" ></div>
        @* 步骤条所在区域*@
        <div class="col-md-8">
            @*步骤条*@
            <ol class="ui-step ui-step-4">
                <li id="li1" class="ui-step-start ui-step-active" >
                    <div class="ui-step-line">-</div>
                    <div id="d1" class="ui-step-icon">
                        <i class="iconfont"></i>
                        <i class="ui-step-number">1</i>
                        <span class="ui-step-text">填写项目信息</span>
                    </div>
                </li>
                <li id="li2" class="ui-step-line">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i>
                        <i class="ui-step-number">2</i>
                        <span class="ui-step-text">生成招标编号</span>
                    </div>
                </li>
                <li id="li3" class="ui-step-line">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i>
                        <i class="ui-step-number">3</i>
                        <span class="ui-step-text">设置评标方法</span>
                    </div>
                </li>
                <li id="li4" class="ui-step-end">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i>
                        <i class="ui-step-number">4</i>
                        <span class="ui-step-text">生成招标文件</span>
                    </div>
                </li>
            </ol>
        </div>
        <div class="col-md-2"></div>
    </div>

添加进度条需要引用的css样式：

@*进度条需要引用的文件*@

@* AliceUI基础样式 *@
<link href="../../Content/base-master/src/base.css" rel="stylesheet" />
@* 步骤条样式 *@
<link href="../../Content/step-master/step.css" rel="stylesheet" />
@*AliceUI图标字体*@
<link href="../../Content/iconfont-master/index.css" rel="stylesheet" />

实现效果展示：

总结：

1.可能你陌生的东西很多，但是不要多想一点点看就对了

2.不要把问题复杂化，先滤清思路，不要扎进代码里

3.站在巨人肩膀上

我是周洲

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
43
评论
EasyUI+JQuery轻松实现步骤条效果

最近加入一个新的项目组，组长对我好。。。严厉啊！哼，就给了一天时间看看需求，直接是上手实现功能。但是聪明如我，积极主动的去找组长给我讲了讲框架，大概的懂了懂，一天半的时间实现了一个前台的小功能，给大家展示一把~　　先来讲一下需求。在我们平时购物的时候，经常是这样一个步骤，下订单，交货款，卖家发货，确认收货，评价。那么如果UI设计上一个进度条，这样用户就可以很清楚的看到自己在哪个位置，需
复制链接

扫一扫