easyui의 DataGrid 셀에 ProgressBar 진행률 막대 추가

인터넷에서 찾을 수 없는 많은 것들이 있는데, 마지막에 스스로 방법을 생각해 냈다.

<div id="p" class="easyui-progressbar" style="width:400px;"></div>  

 
 
이것을 통해 페이지의 실제 코드를 관찰할 수 있다

<div id="p" class="easyui-progressbar progressbar" style="width: 118px; height: 20px;" value="90" text="90%">
    <div class="progressbar-text" style="width: 118px; height: 20px; line-height: 20px;">90%</div>
    <div class="progressbar-value" style="width: 90%; height: 20px; line-height: 20px;">
        <div class="progressbar-text" style="width: 118px; height: 20px; line-height: 20px;">90%</div>
    </div>
</div>

 
데이터grid에서 자신의 수치를 위의 90으로 바꾸면 됩니다
내가 여기에 페이지에 전달한 것은 수치이지 백분율이 아니다

                        {field: 'status', title: '  ', width: getWidth(0.12), align: 'center',
                            formatter: function (value, rec) {
                                //rec.status*100/4
                                var tempval=rec.status*100/4;
                                var htmlstr = '<div class="easyui-progressbar progressbar" style="width: 196px; height: 20px;" value="'+tempval +'" text="'+tempval+'%">'+
                                '<div class="progressbar-text" style="width: 196px; height: 20px; line-height: 20px;">'+tempval+'%</div>'+
                                    '<div class="progressbar-value" style="width: '+tempval+'%; height: 20px; line-height: 20px;">'+
                                        '<div class="progressbar-text" style="width: 196px; height: 20px; line-height: 20px;">'+tempval+'%</div>'+
                                    '</div>'+
                                '</div>';
                                return htmlstr;
                            }
                        }