Fatal编程技术网
  • jquery/
  • Jquery 按钮打开从Web服务读取jtable数据的模式

Jquery 按钮打开从Web服务读取jtable数据的模式

jquery

Jquery 按钮打开从Web服务读取jtable数据的模式,jquery,modal-dialog,Jquery,Modal Dialog,我有一个html页面，它使用jtable从Web服务获取数据，假设此页面位于url../hr/test.htm上，因此我的页面如下所示 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

我有一个html页面，它使用jtable从Web服务获取数据，假设此页面位于url../hr/test.htm上，因此我的页面如下所示

      <!DOCTYPE html>
    <html>
   <head>
   <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>        
    <link href="../css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>            
    <link href="../css/jtable-themes/lightcolor/red/jtable.css" rel="stylesheet" type="text/css" />
    <link href="../css/template.css" rel="stylesheet" type="text/css" />        
    <script src="../js/jquery.PrintArea.js" type="text/javascript"></script>
    <script src="../js/jquery.ui.datepicker-el.js"></script> 
    <script src="../js/jquery.myfunctions.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery.jtable.js" type="text/javascript"></script>
  <script type="text/javascript">       
  $(document).ready(function () {  
  $(document).myfunctions({});
  $(document).myfunctions('initialize');   
  var hrUrl = $(document).myfunctions('hrUrl');
  $('#PersonTableContainer').jtable({
    title: 'Test with Persons',
    actions: {
     listAction: hrUrl + '/getRemainingLeaves'
    },
    fields: {
        leaveCategoryDesc: {
            title: 'Category',
            width: '8.3%'
        },
        leaveRemaining: {
            title: 'Remaining',
            width: '8.3%'
             },
        approvalfrom: {
            title: 'from',
            width: '8.3%'
             },
        approvalto: {
            title: 'to',
            width: '8.3%'
      }
    }
  });
  $('#PersonTableContainer').jtable('load');
 });
 </script> 
 </head>
 <body>
 <div id="PersonTableContainer"></div>
 </body>
 </html>


$（文档）.ready（函数（）{
$（document）.myfunctions（{}）；
$（document）.myfunctions（'initialize'）；
var hrUrl=$（document.myfunctions（'hrUrl'）；
$（“#PersonTableContainer”）.jtable({
标题：“与人一起测试”，
行动：{
listAction:hrUrl+'/GetRemainingleves'
},
字段：{
leaveCategoryDesc：{
标题：“类别”，
宽度：“8.3%”
},
剩余假期：{
标题：'剩余'，
宽度：“8.3%”
},
批准人：{
标题：'从'，
宽度：“8.3%”
},
批准：{
标题：'至'，
宽度：“8.3%”
}
}
});
$（'PersonTableContainer'）.jtable（'load'）；
});
然后在第二个页面上，我希望有一个按钮图像，当用户点击它时，一个模态将使用jquery填充，它将在模态中显示上面的页面。。。这可能吗？？假设该图像已打开../images/adies.png，我如何识别该图像？？到目前为止，我已经尝试了许多不同的方法。。任何帮助都将不胜感激

谢谢大家…

您可以在模式中加载页面内容。我就是这样做的

function openDialog(dialogSelector, titleStr, url, options) {
    $(dialogSelector).attr('title', titleStr);
    if (url != null && url != "") {
        $(dialogSelector + "Content").load(url, function() {
            $(dialogSelector).dialog(options);
        });
    }
 };
在我的dom中：

<div id="dialog1" style="display: none">
    <div id="dialogContent"></div>
    <div id="dialogFooter"></div>
</div>
你的回答太棒了！！真的非常感谢你，所以如果有人需要，我设法用modal和iframe做了它，在我的新页面的头部我放了这样的短信

  $(document).ready(function () {        
   $(".test").click(function () {
    $("#thedialog").attr('src', $(this).attr("href"));
    $("#somediv").dialog({
        width: 730,
        height: 230,
        modal: true,
        close: function () {
            $("#thedialog").attr('src', "about:blank");
        }
    });
    return false;
 });
在身体里我这样称呼它

   <a href="../hr/test.htm" class="test" ><img src="../images/adies.png" id="right-button" alt="Left Leaves" title="Left Leaves" align="right" style="width:40px;height:40px"></a><br>
   <div id="somediv" title="Left Leaves" style="display:none;">
   <iframe id="thedialog" width="700" height="150" frameBorder="0"></iframe>
再次感谢……：）

   <a href="../hr/test.htm" class="test" ><img src="../images/adies.png" id="right-button" alt="Left Leaves" title="Left Leaves" align="right" style="width:40px;height:40px"></a><br>
   <div id="somediv" title="Left Leaves" style="display:none;">
   <iframe id="thedialog" width="700" height="150" frameBorder="0"></iframe>