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: 'MY_ID', index: 'MY_ID', sortable: false, align:'center', width: 40, formatter:function(cellvalue, options, rowObject){ return "<input type='radio' name='myId' value='"+cellvalue+"' onclick='secFn(this)'/>" } }, { 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: false, //是否支持多选 // rownumbers: true, //序号 autowidth:false, height:height, // shrinkToFit:true, rowNum: 3, pager: "#orderstay_toolber", onSelectRow: function(ids) { $(this).find('tr').removeClass("success"); $(this).find('tr').attr("aria-selected",false) $($(this)[0]).find("input[name='myId']")[ids - 1].checked = true; $($(this)[0]).find('input[name="myId"]:checked').parent().parent().addClass("success"); $($(this)[0]).find('input[name="myId"]:checked').parent().parent().attr("aria-selected",true); } }) $("#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 obj=$('#orderstay_jqGrid').find(".success"); ans=obj.find('.answerGroupCode').attr('title'); alert(ans); } </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>
下面是我的文件结构
common文件夹
