如何为jQgrid中的每一行的列添加"jQuery" onclick功能，以显示不同行的不同弹出窗口 [英] How to add “jQuery” onclick functionality for a column each row in jQgrid to display different popups for different rows
本文介绍了如何为jQgrid中的每一行的列添加"jQuery" onclick功能，以显示不同行的不同弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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: "<a href='#'>1234567890123456</a>", oid_type: "F", oid_type_desc: "Federal/Agency STRIP"}, {cusip: "<a href='#'>1234567890123456</a>", oid_type: "S", oid_type_desc: "Taxable STRIP not backed by a federal/agency bond"}],
$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='PIK'>
<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">PIK</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">Bond Unit Factor</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">PIK Rate</label>
<input type="text" class="form-control CUSIP_Text_Input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Cash Rate</label>
<input type="text" class="form-control CUSIP_Text_Input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Payment Mode</label>
<select class="form-control CUSIP_Form_Control">
<option>Cash</option>
<option>Bonds</option>
<option>Bankruptcy</option>
</select>
</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='GIK'>
<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">PIK</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">Bond Unit Factor</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">PIK Rate</label>
<input type="text" class="form-control CUSIP_Text_Input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Cash Rate</label>
<input type="text" class="form-control CUSIP_Text_Input">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Payment Mode</label>
<select class="form-control CUSIP_Form_Control">
<option>Cash</option>
<option>Bonds</option>
<option>Bankruptcy</option>
</select>
</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 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在上面的HTML中，我有一个jQgrid表.我对jQuery非常陌生，我的jQgrid表工作正常.但是我需要的是我在此html中保留了不同的弹出窗口.因此，如果我在名为"CUSIP"的列中单击一些行"，则应显示带有唯一"id"的某些特定弹出窗口.我不了解如何为此编写"onclick"功能.有人可以帮我吗.请记住，我需要的是"CUSIP"列中的每一行都有一个具有唯一ID的弹出窗口，因此如何为每个单元格编写一个带有"ID"的"onclick"功能.我在此保留了两个具有不同ID的引导程序弹出窗口.通过单击不同的行来显示每个.
In the above Html, I have a jQgrid table. I am very new to jQuery and my jQgrid table is working fine. But what I need is I kept different popups in this html. So if I click on some "row" in the column named as "CUSIP", some particular popup with unique 'id' should be displayed. I am not understanding how to write the 'onclick' functionality for this. Could anybody help me please. Remember that What I need is each row in 'CUSIP' column has different popup with a unique id, so how to write a 'onclick' function with a 'id' for each cell. I kept 2 bootstrap popups with different id's in this. each should be displayed by clicking on different rows.
推荐答案
<script type="text/javascript">
/////////////////UPCOMING RECORD DATE/////////////////
$(function () {
'use strict';
var mydata = [
{cusip: "<a href='#' data-toggle='modal' data-target='#TIPS'1234567890123</a>", oid_type: "F", oid_type_desc: "TIPS"},
{cusip: "<a href='#' data-toggle='modal' data-target='#NQSI'1234567890</a>", oid_type: "S", oid_type_desc: "NQSI"},
{cusip: "<a href='#' data-toggle='modal' data-target='#TIPS'1234567</a>", 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>
这是最终答案...我得到了100％的结果
This is the final answer...I got 100% result
这篇关于如何为jQgrid中的每一行的列添加"jQuery" onclick功能，以显示不同行的不同弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
