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": " 草稿<br>(暂存)"},
{"id": "2","name": " 草稿<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>