我使用弹出窗口在jqgrid中显示特定的行详细信息 [英] i hav stuck in jqgrid display particular row details using popup
问题描述
在json中我使用bootstrap弹出窗口创建一个按钮但是如何在弹出窗口中显示特定的行详细信息视图....
< ！DOCTYPE html >
< html lang = en >
< head >
< meta http-equiv = X-UA兼容 内容 = IE = edge，chrome = 1 / >
< meta charset = utf-8 / >
< title > jqGrid < / title >
< meta name = description < span class =code-attribute> content = 使用jqGrid插件的动态表和网格 / >
< meta name = viewport content = width = device-width，initial-scale = 1.0，maximum-scale = 1.0 / >
<！ - bootstrap& fontawesome - >
< link rel = stylesheet href = assets / css / bootstrap.min.css / >
< link rel = 样式表 href = assets / font-aw esome / 4.2.0 / css / font-awesome.min.css / < span class =code-keyword>>
<！ - 页面特定的插件样式 - >
< link rel = stylesheet href = assets / css / jquery-ui .min.css / >
< link rel = stylesheet href = assets / css / datepicker.min.css / >
< link < span class =code-attribute> rel = stylesheet href = assets / css / ui.jqgrid.min.css / >
<！ - < /跨度> 文字字体 - >
< link rel = stylesheet href = assets / fonts / fonts.googleapis.com.css / >
<！ - ace样式 - >
< link rel = 样式表 href = assets / css / ace.min.css class = ace-main-stylesheet id = main-ace-style / >
< script src = assets / js / ace-extra.min.js &克t; < / script >
< / head >
< body class = no-skin >
< div < span class =code-attribute> class = main-container id = 主-C ontainer >
< div class = 主要内容 >
< div 类 = main-content-inner >
< div < span class =code-attribute> class = page-content >
< div class = row >
< div class = col-xs-12 >
< table id = grid-table > < / table >
< / div > <！ - /.col - >
< / div > <！ - /.row - >
< / div > < ！ - /.page-content - >
< / div >
< / div > <！ - /.main-content - >
< / div > <！ - /.main-container - >
<！ - 按钮触发模式 - >
<！ - 模态 - >
< div class = modal fade id < span class =code-keyword> = myModal tabindex = - 1 角色 = 对话框 aria-labelledby = myModalLabel >
< div class = 模态对话框 角色 = document >
< div class = < span class =code-keyword> modal-content >
< div class = modal-header >
< 按钮 type = button class = < span class =code-keyword> close data-dismiss = modal aria-label = 关闭 > < span aria-hidden = true > & times; < ; / span > < / button >
< ; h4 class < span class =code-keyword> = modal-title id = myModalLabel > 出勤报告< / h4 >
< / div >
< div class = modal-body >
...
< / div >
< div class = modal-footer >
< 按钮 类型 = 按钮 class = btn btn-default data-dismiss = modal > 关闭< / button >
< / div >
< / div >
< / div >
< / div >
< script src = assets / js / jquery.2.1.1.min.js > < span class =code-keyword>< / script >
< script type = < span class =code-keyword> text / javascript >
window .jQuery || document .write（ < script src ='assets /js/jquery.min.js'>\"+ < + / script>）;
< / script >
< 脚本 类型 = text / javascript >
if （' ontouchstart' in document .documentElement） document .write（ < script src ='assets / js / jquery.mobile.custom.min.js'> + < + /脚本> 中）;
< / script >
< script src = assets / js / bootstrap.min.js > < / script >
< script src = assets / js / bootstrap-datepicker。 min.js > < / 脚本 >
< script src = assets / js / jquery.jqGrid.min.js > < / 脚本 >
< script src = assets / js / grid.locale-en.js > < / script >
< script src = assets / js / ace-elements.min.js > < / script >
< script < span class =code-attribute> src = assets / js / ace.min.js > < / script >
< < span class =code-leadattribute> script type = text / javascript >
jQuery（ function （$）{
var grid_selector = ＃grid-table;
// 调整大小以适合页面大小
$（ window ）。on（' resize.jqGrid '， function （）{
$（grid_selector）.jqGrid（' setGridWidth'，$（ .page-content）。width（））;
}）
jQuery（grid_selector）.jqGrid（{
url：' attend.json'，
数据类型： json，
height： 250 ，
colNames：[' 员工姓名'，' 出席'，' view']，
colModel：[
{name：' empname'，index：' empname'，宽度： 60 }，
{name：' 参加'，索引：' 参加'，宽度： 50 }，
{name：' view'，index：' view'，width： 30 }
]，
viewrecords： true ，
loadonce： true ，
altRows：假，
标题： 出勤率
}）;
$（ window ）。triggerHandler（' resize.jqGrid'）; // 触发窗口调整大小以使网格获得正确的大小
}）;
< / script >
< / body >
< / html >
json
[{empname：sa，参加：现在，查看：< ; button type ='button'class ='btn btn-primary btn-lg'data-toggle ='modal'data-target ='＃myModal'> View< / button>}，
{empname：ra，attend：present，view：< button type ='button'class ='btn btn-primary btn-lg'data-toggle ='modal'data -target ='＃myModal'>查看< / button>}，
{empname：pa，参与：现在，查看：<按钮type ='button'class ='btn btn-primary btn-lg' data-toggle ='modal'data-target ='＃myModal'>查看< / button>}，
{empname：ma，参与：现在， view：< button type ='button'class ='btn btn-primary btn-lg'data-toggle ='modal'data-target ='＃myModal'> View< / button>}，
{empname：ra，attend：present，view：< button type ='button'class ='btn btn-primary btn-lg'data- toggle ='modal'data-target ='＃myModal'>查看< / button>}，
{empname：la，atte：现在，查看：< button type ='button'class ='btn btn-primary btn-lg'data-toggle ='modal'data-target ='＃myModal'> View< / button>}
]
）{
var grid_selector = ＃grid-table;
// 调整大小以适合页面大小
（ window ）。on（' resize.jqGrid'， function （）{
（grid_selector）.jqGrid（' setGridWidth'，
in json i hav create a button using bootstrap popup but how to display the particular row details view in popup ....
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>jqGrid </title>
<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="assets/css/datepicker.min.css" />
<link rel="stylesheet" href="assets/css/ui.jqgrid.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="assets/fonts/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<table id="grid-table"></table>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Attendance Report</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.2.1.1.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
</script>
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
})
jQuery(grid_selector).jqGrid({
url: 'attend.json',
datatype: "json",
height: 250,
colNames:['Employee Name','Attendance','view'],
colModel:[
{name:'empname',index:'empname', width:60},
{name:'attend',index:'attend', width:50},
{name:'view',index:'view',width:30}
],
viewrecords : true,
loadonce:true,
altRows: false,
caption: "Attendance"
});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
});
</script>
</body>
</html>
json
[ {"empname":"sa","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ra","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"pa","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ma","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"ra","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"},
{"empname":"la","attend":"present","view":"<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>View</button>"}
]
) { var grid_selector = "#grid-table"; //resize to fit page size
(window).on('resize.jqGrid', function () {
(grid_selector).jqGrid( 'setGridWidth',
这篇关于我使用弹出窗口在jqgrid中显示特定的行详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
