jqgrid表格内状态条

效果图

 

css部分

<style>
    .ztb_main_01 li{list-style:none;display:inline-block}-->
    .online{width:38px;height: 2px; position:relative; left: 8px;right: 0px;top:9px;bottom: 0px;overflow: hidden;  border-bottom:5px solid #ccc; z-index:-1}
    .ztb_main_01{ position:relative; z-index:1000;display: block;height: 80px}
    .ztb_content_01{z-index:1000;height: 40px;margin-left: 5px;display: block}
    .font{height: 40px;font-size: 12px;margin-left:0px;display: block}
    .font li{margin-left: 0px;width:40px;display: inline-block;vertical-align: middle;}
    .circle{font-size:14px; color:#404040; background:url(../res/images/ztb_lc.png) no-repeat;padding-left:15px; height:24px;width:40px}
    .circleSelect{font-size:14px; background:url(../res/images/circleselect.png) no-repeat;padding-left:16px; height:26px;width:42px;margin-left: 0px}
    .ztb_content_01 li:last-child div{width:0px;}
</style>

html部分

<div class="padding20 bgWhite marginTop20">
    <div class="cus-grid row" id="grid-wrap">
        <div class="col-lg-12">
            <table id="list2"></table>
            <div id="pager2"></div>
        </div>
    </div>
</div>

js部分

<script type="text/javascript">

    var str = [{"id": "1","name": "&nbsp;草稿<br>(暂存)"},
        {"id": "2","name": "&nbsp;&nbsp;草稿<br>(已验证)"},
        {"id": "3","name": "运行中"},
        {"id": "4","name": "已下线"}];

    $(function(){
        pageInit();
    });


    function pageInit(){
//创建jqGrid组件
        jQuery("#list2").jqGrid(
            {
                url : '../configCenter/json/scene.json',
                datatype : "json",//请求数据返回的类型。可选json,xml,txt
                height:'auto',
                colNames : ['id','场景名称', '场景描述', '场景状态', '创建时间', '修改时间', '修改人','操作'],//jqGrid的列显示名字
                colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                    {name: 'id', key: true, hidden:true},
                    {name : 'scenename',index : 'name',editable : false,editoptions : {readonly : true,size : 10},align:"left"},
                    {name : 'desc', width: 110,index : 'filesize',editable : true,editoptions : {size : 10},align:"left"},
                    {name : 'status', width: 180,index : 'people',editable : true,editoptions : {size : 10},align:"left",
                        formatter: function (cellvalue, options, rowObject) {

                                return init(str,1);

                        }
                    },
                    {name : 'time',index : 'date',editable : true,editoptions : {size : 10},align:"left"},
                    {name : 'updatetime',index : 'date',editable : true,editoptions : {size : 10},align:"left"},
                    {name : 'updateman',index : 'date',editable : true,editoptions : {size : 10},align:"left"},
                    {name : 'handle',index : 'handle',editable : true,editoptions : {size : 10},align:"left",
                        formatter: formatContext
                    }

                ],

                shrinkToFit:true,
                rowNum : 10,//一页显示多少条
                rowList : [ 10,40],//可供用户选择一页显示多少条
                pager : '#pager2',//表格页脚的占位符(一般是div)的id
                sortname : 'id',//初始化的时候排序的字段
                sortorder : "desc",//排序方式,可选desc,asc
                mtype : "GET",//向后台请求数据的ajax的类型。可选post,get
                viewrecords : false,
                caption : "",//表格的标题名字,
                multiselect: true,//表格的多选设置，全部勾选已经内部配置；
                editurl : 'data/JSONData.json',
                autowidth:true,
                altRows:true,
            }
        );
    }
    //创建layer弹幕层
    //格式化表格
    //
    function formatContext( cellvalue, options, rowObject ){
        var id = options.rowId;
        return '<span class="handle" onclick="see(this)">查看</span><span class="handle" onclick="edit(this)">编辑</span><span class="handle" onclick="deleteApply(this)">删除</span><span class="handle" onclick="stop(this)">停用</span>';
        //return '<a href=\'committee-apply-add.html\' target="_blank" style=\'color: blue;text-decoration:underline\'>修改</a>  <a href=\'confirm.html\' target="_blank" style=\'color: blue;text-decoration:underline\'>申请</a>  <a ds_id="\'+ds_id+\'" onclick="deleteApply(this)" flag=\'"+id+"\' style=\'color: blue;text-decoration:underline\'>删除</a>  <a href=\'reviewlayer.html\' target="_blank" style=\'color: blue;text-decoration:underline\'>撤回</a>';
    }

    function init(data,id) {
        html="";
        html += '<div class="ztb_main_01">'+
            '<ul class="ztb_content_01">';
        $.each(data,function(a){
            if(data[a].id==id){
                html += '<li class="circleSelect"><div class="online" style="margin-left: 1px"></div></li>'
            }else{
                html += '<li class="circle"><div class="online"></div></li>'
            }
        });
        html += '</ul>'+
            '<ul class="font">';
        $.each(data,function(b){
            html+='<li>'+data[b].name+'</li>';
        });
        html += '</ul></div>';
        return html;
    }
</script>