bootstrap插件—ystep使用

实现效果：

 

代码实现：

Web前端：

<div id="progress_show"></div>

<script src="/theme/<?=T_D?>/assets/ystep-master/js/ystep.js" type="text/javascript" ></script> 
<link href="/theme/<?=T_D?>/assets/ystep-master/css/ystep.css" rel="stylesheet" type="text/css" />

JS：

$.ajax({ 
                     type: 'POST', 
                      url: '/management/order/get_progress' , 
                     data: "id="+order.id, 
                     success:function(result) 
                     { 
                             $("#Progress_Form").find("#progress_show"); 
                            var show_result=jQuery.parseJSON(result); 
                            $("#Progress_Form").find("#progress_show").loadStep({ 
                                size: "large", 
                                color: "blue", 
                                steps: show_result 
                            }); 
                            $("#Progress_Form").find("#progress_show").setStep(show_result.length); 
                     }, 
                    dataType:"text" 
                });

后端PHP:

function get_progress() 
    { 
        $id=$this->input->post('id'); 
        $cur_lang=$this->session->userdata('lang'); 
        $sql="select a.content,a.add_time,b.`name`,c.username from hc_order_status a 
        left join (select hospital_id,`name` from hc_hospital_alias where lang='$cur_lang') b on a.hospital_id=b.hospital_id 
        left join hc_admin c on a.add_uid=c.id where a.order_id=$id order by a.id asc";

        $db_result=$this->db->query($sql)->result_array(); 
        $result=array(); 
        foreach($db_result as $item) 
        { 
            $result[]=array( 
            'title'=>$item['content'], 
            'content'=>(empty($item['name'])==true?$item['username']:$item['name']).'['.date('Y-m-d H:i:s', $item['add_time']).']' 
            ); 
        } 
        echo json_encode($result,JSON_UNESCAPED_UNICODE); 
    }

官方网站: https://github.com/iyangyuan/ystep