注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

状态跟踪图文结合实现方式  

2011-01-29 16:00:09|  分类: Extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   当我们网上购物支付完成以后,也许最关心的问题就是物流情况了。我们希望随时能查询到我们的包裹(或者快递)现在到什么阶段了,比如说卖家是否发货了,什么时候发的,现在具体又到什么地方了等等!这就是我们常说的查看“订单详情”,基本上做的比较好的网站都有这个查询功能,比如说在淘宝网上有个“查看物流详情”,在卓越亚马逊上可从我的订单中查询,京东商城上的“我的京东-->订单中心”中都有这个功能。

      虽然各大网站都有查看订单详情的这种功能,但是也有一些小的区别!话说在一个平常的下午,我一兄弟发了以下一张图片给我:

状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客
 
然后和我交流了一下,大概内容就是说,这种方式的订单查询很人性化,用户体验很好,图文结合显示,一看就很明了!问我能不能也在我们系统中实现这种类似图文结合显示的功能?我看了一下非常赞同他的意见,说实现应该没问题,可是公司最近比较忙,没空去做!不过发现值得借鉴的功能,加班也得学学啊,所以某天悄悄的让我们美工给我做了四张图片,晚上加班简单的实现了一个类似效果:(如下图所示) 

状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客

我不清楚具体京东商城的购物网站是按什么思路实现的(毕竟人家的思想可不会轻易告诉我们),初步猜测了一下,然后按自己的方式(可能有点简单)实现了。在此用到的只有以下四张图片:

状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客状态跟踪图文结合实现方式 - 飞天心宏 - 飞天心宏的博客  对应图片名为为(green.png,green_1.png,grey.png,grey_1.png)

思路:

1、预先定义步骤数据,并对每个步骤编号

2、数据库查询当前步骤

3、根据当前步骤动态加载对应的图片(green/gray)

4、附加一个Grid列表显示详情

主要是利用了Extjs的DomHelper实现!

 

完整代码如下:

 

/*

*  Copy Right:(C)2010

*  Author:xuzhihong

*  Create Date:

*  Description: 样品状态

*/

 

Ext.onReady(function() {

    var SampleID = GS.COMMON.GetQueryString('SampleID');

    Ext.Ajax.request(

    {

        method: 'POST',

        url: 'JL_SampleState.aspx',

        success: function(response) {

            //转成对象

            var obj = Ext.decode(response.responseText);

            if (obj.success) {

                fn(obj.currentStep);

                obj.msg == null ? '' : Ext.fly('Msg').dom.innerHTML = obj.msg;

                Ext.fly('SampleCode').dom.innerHTML = obj.sampleCode; //样品编号

            }

            else {

                Twi.Msg.Error(null, obj.message);

            }

        },

        failure: function(response) {

            Twi.Msg.Error(null, '异步加载数据失败,错误信息为:' + response.responseText);

        },

        params: {

            sign: 'State',

            SampleID: SampleID

        }

    });

 

    var store = Twi.Data.JsonStore({

        Url: 'JL_SampleState.aspx',

        autoLoad: true,

        baseParams: {

            sign: 'Grid',

            SampleID: SampleID

        }

    });

    var ConRenderer = function(value, metaData, record, rowIndex, colIndex, store) {

        if (value == 1) {

            return '审核通过' + ' ' + record.data.Suggestion;

        }

        else if (value==-1)

        {

            return '审核不通过' + ' ' + record.data.Suggestion;

        }

        else if (value==2)

        {

            return '审核不通过[重编制]' + ' ' + record.data.Suggestion;

        }

        else if (value == 3) {

            return '审核不通过[重检测]' + ' ' + record.data.Suggestion;

        }

        else if (value == 4) {

            return '审核不通过[重审核]' + ' ' + record.data.Suggestion;

        }

    }

   

    var columns = Twi.Grid.GetColumns([['操作类型', 'ModuleName'], ['操作时间', 'UpdateTime', { width: 150}], ['操作人', 'UserName'], ['说明', 'Conclusion', { renderer: ConRenderer}]]);

    var grid = Twi.QuickGrid({

        store: store,

        columns: columns,

        renderTo: 'Grid',

        // title:'样品状态详细',

        needPaging: false,

        width:600,

        height: 300

    });

 

});

 

var fn = function(currentStep) {

    var dh = Ext.DomHelper; // create shorthand alias

    dh.append('State', { tag: 'table', id: 'table1' });

    dh.append('table1', { tag: 'tr', id: 'tr1' });

    dh.append('table1', { tag: 'tr', id: 'tr2' });

    dh.append('table1', { tag: 'tr', id: 'tr3' });

    var tpl = dh.createTemplate({ tag: 'td', id: 'tr0td{0}', html: '{1}' });

    var textItems = ['业务登记【开始】', '入库确认', '任务分配', '结果审核', '证书拟稿', '证书审核', '证书批准', '证书打印', '证书发放【完成】'];

    // var currentStep = 5; //当前步骤,从零开始 如:3表示完成了第四步

    var isComplete = false; //完成

    if (currentStep >= textItems.length - 1) {

        currentStep = textItems.length - 1;

        isComplete = true;

    }

    else if (currentStep < 0) {

        currentStep = 0;

    }

    var j = currentStep;

    if (isComplete) {

        j = currentStep - 1;   //解决currentStep == textItems.length - 1时多加一次的问题

    }

    for (var i = 0; i <= j; i++) {

        tpl.append('tr1', [i, '<img alt="" src="images/green.png" class="whiteSpace"/><img alt=""  src="images/green_1.png" />']);

    }

    for (var i = currentStep + 1; i < textItems.length - 1; i++) {

        tpl.append('tr1', [i, '<img alt="" src="images/grey.png" class="whiteSpace"/><img alt=""  src="images/grey_1.png" />']);

    }

    if (currentStep == textItems.length - 1) {

        tpl.append('tr1', [textItems.length - 1, '<img alt="" src="images/green.png" class="whiteSpace"/>']);

    }

    else {

        tpl.append('tr1', [textItems.length - 1, '<img alt="" src="images/grey.png" class="whiteSpace"/>']);

    }

    var tp2 = dh.createTemplate({ tag: 'td', id: 'tr1td{0}', html: '{1}' });

    for (var i = 0; i < textItems.length; i++) {

        tp2.append('tr2', [i, textItems[i]]);

    }

    Ext.fly('tr2').dom.className = 'tr2';

//    //操作日期

//    for (var i = 0; i <= currentStep; i++) {

//        tp2.append('tr3', [i, new Date().toLocaleDateString() + '<br>' + new Date().toLocaleTimeString()]);

//    }

//    Ext.fly('tr3').dom.className = 'tr3';

   

    //当前状态 CurrentState

    Ext.fly('CurrentState').dom.innerHTML = currentStep == textItems.length - 1 ? textItems[currentStep] : '' + textItems[currentStep + 1];

}

 

 

前台HTML:

<body>

    <form id="form1" runat="server">

    <table class="Current">

        <tr>

            <td>样品编号:</td>

            <td><div id="SampleCode"></div></td>

            <td>&nbsp;&nbsp;&nbsp;&nbsp;当前状态:</td>

            <td><div id="CurrentState" class="CurrentState"></div></td>

        </tr>

    </table>

    <div id="Msg"></div>

    <div id="State" class="State"></div>

    <div id="Grid" class="State"></div>  

    </form>

</body>

 

 

下面是简单的样式,当时随便写的,就是为了展现好看点!

 

 .whiteSpace
{
   padding-right:15px; 
   padding-left:15px; 
 }
.tr2
{
 font-size:12px;
 font-family:微软雅黑;

 }
.tr3
{
 font-size:11px;
 color:Gray;
 }
.Current
{
 padding:20px;
 font-size:16px;
 font-weight:bold;
 }
 
.CurrentState
{
 color:Green;
 }
 
.State
{
 padding-left:20px;
 padding-bottom:20px;
 }

 

 

 

因涉及到前后天交付,上面完整的代码,需要加后台交互才能运行,下面提取核心的生成图的代码,可以不用到后台去取数据,直接设置 当前步骤!  var currenStep = 5; 就能展示效果,方便省事的时候测试效果!

 

/*

 *  Copy Right:(C)2010  Twilight Software Development Studio

 *  Author:xuzhihong

 *  CreateDate:  

 *  Description: 状态跟踪  State.js

 */

 

Ext.onReady(function() {

    var dh = Ext.DomHelper; // create shorthand alias

    dh.append('State', { tag: 'table', id: 'table1' });

    dh.append('table1', { tag: 'tr', id: 'tr1' });

    dh.append('table1', { tag: 'tr', id: 'tr2' });

    dh.append('table1', { tag: 'tr', id: 'tr3' });

    var tpl = dh.createTemplate({ tag: 'td', id: 'tr0td{0}', html: '{1}' });

    var textItems = ['业务登记【开始】', '入库确认', '任务分配', '结果审核', '证书拟稿', '证书审核', '证书批准', '证书打印', '证书发放【完成】'];  //预定义步骤数组

    var currenStep = 5; //当前步骤,从零开始 如:3表示第四步

    var isComplete = false; //完成

    if (currenStep >= textItems.length - 1) {

        currenStep = textItems.length - 1;

        isComplete = true;

    }

    else if (currenStep < 0) {

        currenStep = 0;

    }

    var j = currenStep;

    if (isComplete) {

        j = currenStep - 1;   //解决currentStep == textItems.length - 1时多加一次的问题

    }

    for (var i = 0; i <= j; i++) {

        tpl.append('tr1', [i, '<img alt="" src="images/green.png" class="whiteSpace"/><img alt=""  src="images/green_1.png" />']);

    }

    for (var i = currenStep + 1; i < textItems.length - 1; i++) {

        tpl.append('tr1', [i, '<img alt="" src="images/grey.png" class="whiteSpace"/><img alt=""  src="images/grey_1.png" />']);

    }

    if (currenStep == textItems.length - 1) {

        tpl.append('tr1', [textItems.length - 1, '<img alt="" src="images/green.png" class="whiteSpace"/>']);

    }

    else {

        tpl.append('tr1', [textItems.length - 1, '<img alt="" src="images/grey.png" class="whiteSpace"/>']);

    }

    var tp2 = dh.createTemplate({ tag: 'td', id: 'tr1td{0}', html: '{1}' });

    for (var i = 0; i < textItems.length; i++) {

        tp2.append('tr2', [i, textItems[i]]);

    }

    Ext.fly('tr2').dom.className = 'tr2';

    //操作日期

    for (var i = 0; i <= currenStep; i++) {

        tp2.append('tr3', [i, new Date().toLocaleDateString() + '<br>' + new Date().toLocaleTimeString()]);

    }

    Ext.fly('tr3').dom.className = 'tr3';

 

    //当前状态 CurrentState

 

    Ext.fly('CurrentState').dom.innerHTML = currenStep == textItems.length - 1 ? textItems[currenStep] : '' + textItems[currenStep + 1];

});

 

 

就写到这吧,应该说是比较详细了!如果想要样式好看点,找你们团队的美工和UI处理一下,什么效果都会有的!嘿嘿...

 

                                                                                                                 飞天心宏  2011-01-29

 

 

 

 

 

 

 

 

  评论这张
 
阅读(668)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017