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：

 1 $.ajax({
 2                      type: ‘POST‘,
 3                       url: ‘/management/order/get_progress‘ ,
 4                      data: "id="+order.id,
 5                      success:function(result)
 6                      {
 7                              $("#Progress_Form").find("#progress_show");
 8                             var show_result=jQuery.parseJSON(result);
 9                             $("#Progress_Form").find("#progress_show").loadStep({
10                                 size: "large",
11                                 color: "blue",
12                                 steps: show_result
13                             });
14                             $("#Progress_Form").find("#progress_show").setStep(show_result.length);
15                      },
16                     dataType:"text"
17                 });

后端PHP:

 1 function get_progress()
 2     {
 3         $id=$this->input->post(‘id‘);
 4         $cur_lang=$this->session->userdata(‘lang‘);
 5         $sql="select a.content,a.add_time,b.`name`,c.username from hc_order_status a
 6         left join (select hospital_id,`name` from hc_hospital_alias where lang=‘$cur_lang‘) b on a.hospital_id=b.hospital_id
 7         left join hc_admin c on a.add_uid=c.id where a.order_id=$id order by a.id asc";
 8
 9         $db_result=$this->db->query($sql)->result_array();
10         $result=array();
11         foreach($db_result as $item)
12         {
13             $result[]=array(
14             ‘title‘=>$item[‘content‘],
15             ‘content‘=>(empty($item[‘name‘])==true?$item[‘username‘]:$item[‘name‘]).‘[‘.date(‘Y-m-d H:i:s‘, $item[‘add_time‘]).‘]‘
16             );
17         }
18         echo json_encode($result,JSON_UNESCAPED_UNICODE);
19     }

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