jqgride实现多选
Posted xy-milu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jqgride实现多选相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script>var wpo={start:new Date*1,pid:109,page:‘superpage‘}</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="common/css/common.css" />
<link href="common/css/jqgrid/ui.jqgrid.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="common/css/bootstrap-select/bootstrap-select.css">
<link rel="stylesheet" type="text/css" href="common/css/bootstrap-checkbox/bootstrap-checkbox.css">
<link href="common/css/datapicker/datepicker3.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="common/css/projectSelect.css" />
<script src="common/js/jquery.min.js"></script>
<script src="common/js/bootstrap.min.js"></script>
<script src="common/js/jqgrid/jquery.jqGrid.min.js"></script>
<script src="common/js/jqgrid/i18n/grid.locale-cn.js"></script>
<script src="common/js/layer/layer.min.js"></script>
<script src="common/js/jquery.form.js"></script>
<script src="common/js/datapicker/bootstrap-datepicker.js"></script>
<script>
var $OrderStayjqGrid;
$(function() {
//初始化grid
$OrderStayjqGrid = jqGridInit();
$OrderStayjqGrid.Init();
$("#gbox_orderstay_jqGrid").width();
});
// 设置jqgrid的宽度
$(window).bind(‘resize‘, function () {
var width=$(".tablesty").width();
width=window.innerWidth-20;
});
//重置grid宽高
//初始化grid
function jqGridInit(){
var jqGridInit = new Object();
var search = $(‘div[class=search_panel]‘).height();
var height = 300;
//初始化grid
jqGridInit.Init = function(){
jqGridInit.grid = jQuery("#orderstay_jqGrid").jqGrid({
datatype : "local",
jsonReader : {
root:"data",
page: "pageIndex",
total: "totalPage",
records: "totalCount",
repeatitems:false
},
styleUI: ‘Bootstrap‘,//设置jqgrid的全局样式为bootstrap样式
colNames:[‘第一列‘,‘第二列‘,‘第三列‘],
sortable: false,
colModel:[
{
name:"answerGroupName",
index:"answerGroupName",
width:80,
classes: "answerGroupName",
sortable: false,
},{
name:"answerGroupCode",
index:"answerGroupCode",
width:200,
classes: "answerGroupCode",
// hidden: true,
sortable: false,
}, {
name:"askAnswers",
index:"askAnswers",
width:600,
classes: "askAnswers",
sortable: false,
// formatter: function(_val,_o,_i){
// var askAnswers = _i.askAnswers;
// var arr = [];
// $.each(askAnswers,function(x,y){
// arr.push(y.answerDescribe)
// })
// return ‘<span>‘+arr+‘</span>‘
// },
}],
viewrecords: true, //是否显示行数
multiselect: true, //是否支持多选
// rownumbers: true, //序号
autowidth:false,
height:height,
// shrinkToFit:true,
rowNum: 3,
pager: "#orderstay_toolber",
onSelectRow: function (rowId, status, e) {
var rowIds = jQuery("#orderstay_jqGrid").jqGrid(‘getGridParam‘, ‘selarrrow‘);
},
})
$("#orderstay_jqGrid").closest(".ui-jqgrid-bdiv").css({ ‘overflow-y‘ : ‘scroll‘});
$("#first_orderstay_toolber").html("首页");
$("#prev_orderstay_toolber").html("前一页");
$("#next_orderstay_toolber").html("下一页");
$("#last_orderstay_toolber").html("末页");
var mydata = [
{id : "1",answerGroupName : "2007-10-01",answerGroupCode : "test",askAnswers : "note",amount : "200.00",tax : "10.00",total : "210.00"},
{id : "2",answerGroupName : "2007-10-02",answerGroupCode : "test2",askAnswers : "note2",amount : "300.00",tax : "20.00",total : "320.00"},
{id : "3",answerGroupName : "2007-09-01",answerGroupCode : "test3",askAnswers : "note3",amount : "400.00",tax : "30.00",total : "430.00"},
{id : "4",answerGroupName : "2007-10-04",answerGroupCode : "test",askAnswers : "note",amount : "200.00",tax : "10.00",total : "210.00"},
{id : "5",answerGroupName : "2007-10-05",answerGroupCode : "test2",askAnswers : "note2",amount : "300.00",tax : "20.00",total : "320.00"},
{id : "6",answerGroupName : "2007-09-06",answerGroupCode : "test3",askAnswers : "note3",amount : "400.00",tax : "30.00",total : "430.00"},
{id : "7",answerGroupName : "2007-10-04",answerGroupCode : "test",askAnswers : "note",amount : "200.00",tax : "10.00",total : "210.00"},
{id : "8",answerGroupName : "2007-10-03",answerGroupCode : "test2",askAnswers : "note2",amount : "300.00",tax : "20.00",total : "320.00"},
{id : "9",answerGroupName : "2007-09-01",answerGroupCode : "test3",askAnswers : "note3",amount : "400.00",tax : "30.00",total : "430.00"}
];
for ( var i = 0; i <= mydata.length; i++){
jQuery("#orderstay_jqGrid").jqGrid(‘addRowData‘, i + 1, mydata[i]);
}
}
return jqGridInit;
}
function secFn(i){
$(i).parent().parent().addClass("success");
$(i).parent().parent().attr("aria-selected",true);
$(i).parent().parent().siblings().removeClass("success");
$(i).parent().parent().siblings().attr("aria-selected",false)
}
function confirm() {
var list=[];
var obj=$(‘#orderstay_jqGrid‘).find(".success");
for(var i = 0;i<obj.length;i++) {
list.push({code: $(obj[i]).find(‘.answerGroupCode‘).attr(‘title‘)});
}
alert(‘选中的长度为：‘+list.length)
console.log(list);
}
</script>
</head>
<body >
<div id="orderstay_wrapper" style="width:750px;height:100px;padding-top:20px;padding-left: 20px;padding-right:20px;margin: auto ">
<!--jqgride表格-->
<table id="orderstay_jqGrid" ></table>
<!--页码-->
<div id="orderstay_toolber"></div>
</div>
<div class="btn btn-primary" onclick="confirm()">确定</div>
</body>
<style>
.btn{
margin-left: 80%;
margin-top: 400px;
}
.ui-jqgrid-sortable{
font-size:10px;
}
table{
border-radius: 0px!important;
margin-bottom: 0!important;
}
.answerGroupName{
font-size:10px;
padding-left: 10px;
}
.askAnswers{
font-size:10px;
padding-left: 10px;
}
.ui-jqgrid .ui-pg-table td{
font-size: 10px;
color:black;
}
</style>
</html>
以上是关于jqgride实现多选的主要内容，如果未能解决你的问题，请参考以下文章