Jquery 如何书写'；onclick'；用于不同行的函数，以显示不同的'；弹出窗口'； 指数 /////////////////即将创纪录的日期///////////////// $（函数（）{ "严格使用",； var mydata=[ {cusip:“1234567890123”，oid_类型：“F”，oid_类型描述：“TIPS”}， {cusip:“1234567890”，oid_类型：“S”，oid_类型描述：“NQSI”}， {cusip:“1234567”，oid_类型：“C”，oid_类型描述：“CPDI”} ], $grid=$（“#myOID”）， viewParam={ b提交：“保存并关闭”， 再现形式：正确， beforeShowForm:函数（$form）{ $form.find（“td.DataTD”）。每个（函数（）{ var html=$（this.html（）；// if（html.substr（0,6）==“”）{ $（this.html（html.substr（6））； } }); } }; $grid.jqGrid({ 数据类型：“本地”， 数据：mydata， colNames:[“CUSIP”、“OID代码”、“OID类型描述”]， colModel：[ {name:'cusip'，align:'left'，width:120，sorttype:'text'，index:'cusip'}， {name:'oid_type'，align:'left'，width:90，sorttype:'text'，index:'oid_type'}， {name:'oid_type_desc'，align:'left'，width:440，sorttype:'text'，index:'oid_type_desc'}， ], rowNum:15， 行列表：[15]， 寻呼机：“#第1页”， gridview：没错， 自动宽度：正确， //是的， 行数：false， //OnSetrow:功能（id）{ //$（this）.jqGrid（'viewGridRow'，id，viewParam）； // }, sortname:“invdate”， viewrecords:false， 排序器：“desc”， 宽度：650， shrinkToFit：错， 高度：“自动” }); }); /////////////////即将到来的创纪录日期结束//// &时代； 可征税地带 OID型 A. B C D E 发行日期 到期日 接近 保存更改 &时代； 可征税地带 OID型 A. B C D E 发行日期 接近 保存更改 &时代； 可征税地带 OID型 A. B C D E 发行日期 接近 保存更改
在上面的HTML中，我有一个JQGRID表，它有不同的列。在这些列中有一个名为“CUSIP”的列。在此列中，不同行中有不同的数字。Jqgrid对我来说运行良好。我在这个html中放置了3个不同的“引导”弹出窗口。我需要的是，如果我单击第一个“CUSIP”列，将显示id为“TIPS”的弹出窗口；如果我单击第二个“CUSIP”列，将显示id为“NQSI”的弹出窗口；如果我单击第三个“CUSIP”列，将显示id为“CPDI”的弹出窗口。谁能帮我一下吗。我真的需要解决这个问题。我不确定你到底有什么问题。使用您的代码，它的工作没有任何问题。我只是删除了一些不必要的选项。包括Bootstrap3.1.1的CSS和一些次要的CSS设置，以提高jqGrid的可见性。所有的更改都不能描述您可能遇到的问题。换句话说，我无法重现您遇到的问题，但我希望我的工作演示可以帮助您在代码中定位问题 还有一个小提示：如果Jquery 如何书写'；onclick'；用于不同行的函数，以显示不同的'；弹出窗口'； 指数 /////////////////即将创纪录的日期///////////////// $（函数（）{ "严格使用",； var mydata=[ {cusip:“1234567890123”，oid_类型：“F”，oid_类型描述：“TIPS”}， {cusip:“1234567890”，oid_类型：“S”，oid_类型描述：“NQSI”}， {cusip:“1234567”，oid_类型：“C”，oid_类型描述：“CPDI”} ], $grid=$（“#myOID”）， viewParam={ b提交：“保存并关闭”， 再现形式：正确， beforeShowForm:函数（$form）{ $form.find（“td.DataTD”）。每个（函数（）{ var html=$（this.html（）；// if（html.substr（0,6）==“”）{ $（this.html（html.substr（6））； } }); } }; $grid.jqGrid({ 数据类型：“本地”， 数据：mydata， colNames:[“CUSIP”、“OID代码”、“OID类型描述”]， colModel：[ {name:'cusip'，align:'left'，width:120，sorttype:'text'，index:'cusip'}， {name:'oid_type'，align:'left'，width:90，sorttype:'text'，index:'oid_type'}， {name:'oid_type_desc'，align:'left'，width:440，sorttype:'text'，index:'oid_type_desc'}， ], rowNum:15， 行列表：[15]， 寻呼机：“#第1页”， gridview：没错， 自动宽度：正确， //是的， 行数：false， //OnSetrow:功能（id）{ //$（this）.jqGrid（'viewGridRow'，id，viewParam）； // }, sortname:“invdate”， viewrecords:false， 排序器：“desc”， 宽度：650， shrinkToFit：错， 高度：“自动” }); }); /////////////////即将到来的创纪录日期结束//// &时代； 可征税地带 OID型 A. B C D E 发行日期 到期日 接近 保存更改 &时代； 可征税地带 OID型 A. B C D E 发行日期 接近 保存更改 &时代； 可征税地带 OID型 A. B C D E 发行日期 接近 保存更改,jquery,jqgrid,Jquery,Jqgrid,在上面的HTML中，我有一个JQGRID表，它有不同的列。在这些列中有一个名为“CUSIP”的列。在此列中，不同行中有不同的数字。Jqgrid对我来说运行良好。我在这个html中放置了3个不同的“引导”弹出窗口。我需要的是，如果我单击第一个“CUSIP”列，将显示id为“TIPS”的弹出窗口；如果我单击第二个“CUSIP”列，将显示id为“NQSI”的弹出窗口；如果我单击第三个“CUSIP”列，将显示id为“CPDI”的弹出窗口。谁能帮我一下吗。我真的需要解决这个问题。我不确定你到底有什么问题。
cusipcolModelcusipkey:true <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" media="screen" type="text/css">
<link href="css/cerulean.css" rel="stylesheet" media="screen and (min-width: 37.5em)" type="text/css">
<link href="css/custom.css" rel="stylesheet" media="screen" type="text/css">
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen" type="text/css">
<link href="css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css">
<script type='text/javascript' src="js/respond.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script src="js/grid.locale-en.js"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
/////////////////UPCOMING RECORD DATE/////////////////
$(function () {
'use strict';
var mydata = [
{cusip: "1234567890123", oid_type: "F", oid_type_desc: "TIPS"},
{cusip: "1234567890", oid_type: "S", oid_type_desc: "NQSI"},
{cusip: "1234567", oid_type: "C", oid_type_desc: "CPDI"}
],
$grid = $("#myOID"),
viewParam = {
bSubmit: "Save and Close",
recreateForm: true,
beforeShowForm: function ($form){
$form.find("td.DataTD").each(function () {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
});
}
};
$grid.jqGrid({
datatype: 'local',
data: mydata,
colNames: ["CUSIP", "OID Code", "OID Type Description"],
colModel: [
{name: 'cusip', align: 'left', width: 120, sorttype: 'text', index: 'cusip'},
{name: 'oid_type', align: 'left', width: 90, sorttype: 'text', index: 'oid_type'},
{name: 'oid_type_desc', align: 'left', width: 440, sorttype: 'text', index: 'oid_type_desc'},
],
rowNum: 15,
rowList: [15],
pager: '#pager1',
gridview: true,
autoWidth: true,
//editable: true,
rownumbers: false,
// onSelectRow: function (id) {
// $(this).jqGrid('viewGridRow', id, viewParam);
// },
sortname: 'invdate',
viewrecords: false,
sortorder: 'desc',
width: 650,
shrinkToFit: false,
height:"auto"
});
});
/////////////////UPCOMING RECORD DATE ENDS/////////////////
</script>
</head>
<body>
<div class="row" id='oid_index_jqgrid'>
<div class="col-xs-6 oid_index_jqgrid_col">
<div class="col-md-6 oid_index_jqgrid">
<table id="myOID"></table>
<div id="pager1"></div>
</div>
</div>
</div>
<div class="modal fade" id='TIPS'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">TAXBLE STRIP</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
<select class="form-control CUSIP_Form_Control">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
<input type="text" class="form-control CUSIP_Text_Input calender_icon">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Maturity Date</label>
<input type="text" class="form-control CUSIP_Text_Input calender_icon">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id='NQSI'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">TAXBLE STRIP</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
<select class="form-control CUSIP_Form_Control">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
<input type="text" class="form-control CUSIP_Text_Input calender_icon">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id='CPDI'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">TAXBLE STRIP</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
<select class="form-control CUSIP_Form_Control">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
<input type="text" class="form-control CUSIP_Text_Input calender_icon">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
// this is used by the onSelectRow function in jqGrid - see code further down
function showPopup(id){
switch(id){
case 1:
Showpop1();
break;
case 2:
Showpop2();
break;
case 3:
Showpop3();
break;
case 4:
Showpop4();
break;
case 5:
Showpop5();
break;
// case etc...
default:
break;
}
}