vuejs 2.0

来源：互联网发布：英语电影软件编辑：程序博客网时间：2024/06/05 10:35

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/taskM.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="../css/bootstrap-table.css" />
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../js/bootstrap-table.js"></script>

<script src="../js/bootstrap-table-zh-CN.js"></script>

</head>
<body>
<div>
<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a href="#">首页</a></li>
<li><a href="#">分析评估</a></li>
<li><a href="#">任务编写</a></li>
</ul>
</div>

<div class="left">
<ul>
<li>平台首页</li>
<li>A项目
<ul>
<li>    系统A</li>
<li>    系统B</li>
<li>    系统C</li>
</ul>
</li>
<li>
B项目
</li>
</ul>
</div>
<div class="right">
<div class="formbody">
<div class="formtitle"><span>测试项管理</span><span>测试任务管理</span></div>
<div>

</div>
<div class="panel panel-default">
<div class="panel-heading">
筛选条件：
</div>
<div class="panel-body form-group" style="margin-bottom:0px;">
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">全部</label>
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">名称</label>
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">ID</label>
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">所属项目</label>
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">所属系统</label>


<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-refresh" aria-hidden="true" ></span>刷新
</button>
</div>
</div>
</div>

<table id="table_server">

</table>

</div>

<div></div>
</div>
</div>
<script>
$(function () {

var t = $("#table_server").bootstrapTable({
url: 'queryCaseList',
method: 'get',
dataType: "json",
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "空",//当数据为 undefined 时显示的字符
pagination: true, //分页
// paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
// showToggle: "true",//是否显示切换试图（table/card）按钮
showColumns: "true",//是否显示内容列下拉框
pageNumber: 1,//如果设置了分页，首页页码
// showPaginationSwitch:true,//是否显示数据条数选择框
pageSize: 10,//如果设置了分页，页面数据条数
pageList: [5, 10, 20, 40], //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
// singleSelect: false,//设置True 将禁止多选
search: true, //显示搜索框
// showRefresh:true,
data_local: "zh-US",//表格汉化
sidePagination: "server", //服务端处理分页
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
cp: params.offset,//从数据库第几条记录开始
ps: params.limit//找多少条
};
},
idField: "userId",//指定主键列
columns: [
{
title: '选择',

field: 'userId',
align: 'center',
formatter: function (value, row, index) {
return '<input type="checkbox" /> ';
// return '<a href="#" mce_href="#" onclick="edit(\'' + row.userId + '\')">操作</a> ';
}
},
{
title: '测试项ID',
field: 'itemID',
align: 'center'
},
{
title: '测试项名称',
field: 'itemName',
align: 'center'
},
{
title: '创建者',
field: 'itemCreator',
align: 'center'
},
{

title: '所属系统',
field: 'toSystem',
align: 'center'
},
{

title: '所属项目',
field: 'toProject',
align: 'center'
},

{
title: '描述项目',
field: 'itemDescribe',
align: 'center',
formatter: function (value, row, index) {
// return row.userStatus == 0 ? "正常" : row.userStatus == 1 ? "请假" : "离职";
}

}

]
});

t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
console.log("load success");
$(".pull-right").css("display", "block");
});

});
</script>
</body>

</html>

@charset "utf-8";
/* CSS Document */
/***
*
* http://www..com
* e-mail: admin@.com
*/
*{font-size:9pt;border:0;margin:0;padding:0;}
body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}
ul{display:block;margin:0;padding:0;list-style:none;}
li{display:block;margin:0;padding:0;list-style: none;}
img{border:0;}
dl,dt,dd,span{margin:0;padding:0;display:block;}
a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#00a4ac;text-decoration:none;}
table{border-collapse:collapse;border-spacing: 0;}
cite{font-style:normal;}
h2{font-weight:normal;}

.place{height:40px; background:url(../images/righttop.gif) repeat-x;}
.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(../images/rlist.gif) no-repeat right;}
.placeul li:last-child{background:none;}
.left{width: 15%;float: left;padding: 20px;}
.right{width: 85%;float: left;}
/*form*/
.formbody{padding:10px 18px;}
.formtitle{border-bottom:solid 1px #d0dee5; line-height:35px; position:relative; height:35px; margin-bottom:28px;}
.formtitle span{font-weight:bold;font-size:14px; border-bottom:solid 3px #66c9f3;display: inline-block;float:left; bottom:-1px; padding:0 3px; height:30px; line-height:30px;}
.forminfo{padding-left:23px;}
.forminfo li{margin-bottom:13px; clear:both;}
.proSystem {height: 35px;}
.proSystem div{height: 35px;display: inline-block;float: left;margin-right: 100px;}

.forminfo li label{width:140px;line-height:34px; display:inline-block; float:left;}
.forminfo li label span,.vme label span{display:inline-block;float:left;color: red;}
.forminfo li i{color:#7f7f7f; padding-left:20px; font-style:normal;}
.i{
margin-left: 6%;
}
.forminfo li cite{display:block; padding-top:10px;}

.dfinput,.dfinput1,.dfinput2{width:420px; height:32px; line-height:32px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; text-indent:10px;}
.dfinput1{width: 200px;}
.dfinput2{width:150px;}
.textinput{border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; padding:10px; width:700px; height:135px; line-height:20px; overflow:hidden;}
.btn{width:137px;height:35px; background:url(../images/btnbg.png) no-repeat; font-size:14px;font-weight:bold;color:#fff; cursor:pointer;}

.scinput{width:150px; height:32px; line-height:32px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; text-indent:10px;}

.csbtn{
width:85px;height:35px; font-size:14px;font-weight:bold;color:#fff; cursor:pointer;border-radius:3px;
}

#optionContainer{
width: 85%;
margin: 0 auto;
text-align: center;
}
#optionContainer tr{
height: 50px;
}
.vme{
width: 95%;
margin: 0 auto;
border: 1px solid silver;
}
.vme>label {
width: 100%;
margin: 15px auto;
border-bottom: 1px solid silver;
padding-bottom: 10px;
display: inline-block;

}
.scbtn{margin-left:7.5%;margin-bottom: 20px;width:85px;height:35px; background:url(../images/btnbg.png) no-repeat center; font-size:14px;font-weight:bold;color:#fff; cursor:pointer;border-radius:3px;}
.tabA{
width: 100%;
border-collapse: collapse;
}
.tabA th{
border: 1px solid white;
background:#3d96c9;
color:#fff;
}
#option0 th span{display:inline-block;color: red;}

.tabA tbody tr:hover{background:#e5ebee;}
.savebtn{float: right;margin: 20px 2.5% 20px 0;width:85px;height:35px; background:url(../images/btnbg.png) no-repeat center; font-size:14px;font-weight:bold;color:#fff; cursor:pointer;border-radius:3px;}

阅读全文

0 0