Fatal编程技术网
  • javascript/
  • Javascript Yii：将CGridview添加到表单

Javascript Yii：将CGridview添加到表单

javascript php jquery yii model

Javascript Yii：将CGridview添加到表单,javascript,php,jquery,yii,model,Javascript,Php,Jquery,Yii,Model,我正在尝试在create.php中创建一个可选表，该表连接到另一个模型中。如果您在表格中选择一行，它将自动放入我的下拉列表中 我有5张相互连接的桌子 Shift: shft_id,start,end,name,status Day: id_day,mon,tue,wed,thurs,fri,sat,sun,name Sched: id_sched,sched_name,fk_id_day,status EmpSched: id_emp_sched,fk_id_sched,from,to,d

我正在尝试在create.php中创建一个可选表，该表连接到另一个模型中。如果您在表格中选择一行，它将自动放入我的下拉列表中

我有5张相互连接的桌子

Shift: shft_id,start,end,name,status

Day: id_day,mon,tue,wed,thurs,fri,sat,sun,name

Sched: id_sched,sched_name,fk_id_day,status

EmpSched: id_emp_sched,fk_id_sched,from,to,default,fk_user

User_dummy: id_user, empno, leave_credits
在我的empsched表中，我希望在create.php empsched中有一个表，它将显示我的day表的CGridView。当我双击它时，表格中的一行。我的fk_id_sched拿到了桌子。我还希望在表格下方有一个模式弹出窗口，以便它可以添加另一个数据，我希望在fk_id_sched中获取这些数据

我只是想知道这是否可能？id_日与fk_id_计划相关。如果您双击表格，它将获取数据-id_day 1将在我的fk_id_sched表单中作为hehe获取

在我的empSched_form.php中：

在my Day admin.php中：

EMP计划模型中没有关系

这是我的EmpSched create.php的页面源代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />

    <link rel="stylesheet" type="text/css" href="/hris/themes/bootstrap/css/styles.css" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/hris/assets/ac3c9c93/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/hris/assets/ac3c9c93/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="/hris/assets/ac3c9c93/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/hris/assets/ac3c9c93/css/jquery-ui-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/hris/assets/ac3c9c93/css/bootstrap-datepicker.css" />
<script type="text/javascript" src="/hris/assets/7c5d9cbe/jquery.min.js"></script>
<script type="text/javascript" src="/hris/assets/7c5d9cbe/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/hris/assets/ac3c9c93/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/hris/assets/ac3c9c93/js/bootstrap.min.js"></script>
<title>HRIS - Create EmpSched</title>

    </head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-inner"><div class="container"><a href="/hris/index.php" class="brand">HRIS</a><ul id="yw6" class="nav"><li><a href="/hris/index.php?r=site/index">Home</a></li><li><a href="/hris/index.php?r=site/page&amp;view=about">About</a></li><li><a href="/hris/index.php?r=site/contact">Contact</a></li><li><a href="/hris/index.php?r=site/logout">Logout (admin)</a></li></ul></div></div></div>
<div class="container" id="page">

            <ul class="breadcrumbs breadcrumb"><li><a href="/hris/index.php">Home</a></li><span class="divider">/</span><li><a href="/hris/index.php?r=scheduling/empSched/index">Emp Scheds</a></li><span class="divider">/</span><li class="active">Create</li></ul><!-- breadcrumbs -->

    <div class="row">
    <div class="span9">
        <div id="content">

<h1>Create EmpSched</h1>

<form class="form-vertical" id="emp-sched-form" action="/hris/index.php?r=scheduling/empSched/create" method="post">
<p class="help-block">Fields with <span class="required">*</span> are required.</p>


<div>
    <label for="EmpSched_fk_id_sched">Fk Id Sched</label>    <select name="EmpSched[fk_id_sched]" id="EmpSched_fk_id_sched">
<option value="1">hehe</option>
<option value="2">michael so</option>
<option value="3">John Mark</option>
<option value="4">Calvin</option>
<option value="5">Jeric</option>
<option value="7">anthony</option>
<option value="8">hehehehe</option>
<option value="9">Rhue ann</option>
</select>    </div>



<label for="EmpSched_from">From</label><div class="input-prepend"><span class="add-on"><i class="icon-calendar"></i></span><input class="span4" type="text" autocomplete="off" name="EmpSched[from]" id="EmpSched_from" /></div>


<label for="EmpSched_to">To</label><div class="input-prepend"><span class="add-on"><i class="icon-calendar"></i></span><input class="span4" type="text" autocomplete="off" name="EmpSched[to]" id="EmpSched_to" /></div>




<label class="checkbox" for="EmpSched_default"><input id="ytEmpSched_default" type="hidden" value="0" name="EmpSched[default]" /><input name="EmpSched[default]" id="EmpSched_default" value="1" type="checkbox" />
Default</label>


<div>
    <label for="EmpSched_fk_user" class="required">Fk User <span class="required">*</span></label>    <select name="EmpSched[fk_user]" id="EmpSched_fk_user">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
</select>    </div>

<div class="form-actions">
    <button class="btn btn-primary" id="yw2" type="submit" name="yt0">Create</button></div>

</form>
<div id="day-grid" class="grid-view">
<div class="summary">Displaying 1-10 of 12 results.</div>
<table class="items table">
<thead>
<tr>
<th id="day-grid_c0"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=name">Name<span class="caret"></span></a></th><th id="day-grid_c1"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=mon">Mon<span class="caret"></span></a></th><th id="day-grid_c2"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=tue">Tue<span class="caret"></span></a></th><th id="day-grid_c3"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=wed">Wed<span class="caret"></span></a></th><th id="day-grid_c4"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=thurs">Thurs<span class="caret"></span></a></th><th id="day-grid_c5"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=fri">Fri<span class="caret"></span></a></th><th id="day-grid_c6"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=sat">Sat<span class="caret"></span></a></th><th id="day-grid_c7"><a class="sort-link" href="/hris/index.php?r=scheduling/empSched/create&amp;day_sort=sun">Sun<span class="caret"></span></a></th><th class="button-column" id="day-grid_c8">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="odd">
<td>hehe</td><td>8</td><td>6</td><td>6</td><td>6</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=1"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=1"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=1"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day2</td><td>&nbsp;</td><td>8</td><td>8</td><td>6</td><td>6</td><td>6</td><td>6</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=2"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=2"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=2"><i class="icon-trash"></i></a></td></tr>
<tr class="odd">
<td>day3</td><td>6</td><td>6</td><td>6</td><td>8</td><td>6</td><td>6</td><td>6</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=3"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=3"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=3"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day4</td><td>6</td><td>6</td><td>6</td><td>6</td><td>8</td><td>6</td><td>6</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=4"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=4"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=4"><i class="icon-trash"></i></a></td></tr>
<tr class="odd">
<td>day5</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=5"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=5"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=5"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day6</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=6"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=6"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=6"><i class="icon-trash"></i></a></td></tr>
<tr class="odd">
<td>day7</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>9</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=7"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=7"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=7"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day11</td><td>8</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>8</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=11"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=11"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=11"><i class="icon-trash"></i></a></td></tr>
<tr class="odd">
<td>day12</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>9</td><td>9</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=12"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=12"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=12"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day13</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>8</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&amp;id=13"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&amp;id=13"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&amp;id=13"><i class="icon-trash"></i></a></td></tr>
</tbody>
</table>
<div class="pagination"><ul id="yw3" class="yiiPager"><li class="previous disabled"><a href="/hris/index.php?r=scheduling/empSched/create">&larr;</a></li>
<li class=" active"><a href="/hris/index.php?r=scheduling/empSched/create">1</a></li>
<li class=""><a href="/hris/index.php?r=scheduling/empSched/create&amp;day_page=2">2</a></li>
<li class="next"><a href="/hris/index.php?r=scheduling/empSched/create&amp;day_page=2">&rarr;</a></li></ul></div><div class="keys" style="display:none" title="/hris/index.php?r=scheduling/empSched/create"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>11</span><span>12</span><span>13</span></div>
</div><script>
    $(function() {

        // when row is clicked
        $('#day-grid tbody:first').on('click', 'tr', function() {

            // get the ID
            var id = $(this).find('td:first').text();

            // select the same option in dropdown list with same value
            $('#EmpSched_fk_id_sched')
                .find("option[value="+ id +"]")
                .prop("selected", "selected");
        });
    });fb
</script>        </div><!-- content -->
    </div>
    <div class="span3">
        <div id="sidebar">
        <div class="portlet" id="yw4">
<div class="portlet-decoration">
<div class="portlet-title">Operations</div>
</div>
<div class="portlet-content">
<ul class="operations nav" id="yw5"><li><a href="/hris/index.php?r=scheduling/empSched/index">List EmpSched</a></li><li><a href="/hris/index.php?r=scheduling/empSched/admin">Manage EmpSched</a></li></ul></div>
</div>        </div><!-- sidebar -->
    </div>
</div>

    <div class="clear"></div>

    <div id="footer">
        Copyright &copy; 2013 by My Company.<br/>
        All Rights Reserved.<br/>
        Powered by <a href="http://www.yiiframework.com/" rel="external">Yii Framework</a>. </div><!-- footer -->

</div><!-- page -->

<script type="text/javascript" src="/hris/assets/ac3c9c93/js/bootstrap.datepicker.js"></script>
<script type="text/javascript" src="/hris/assets/ac3c9c93/js/locales/bootstrap-datepicker.en_us.js"></script>
<script type="text/javascript" src="/hris/assets/e689fd44/gridview/jquery.yiigridview.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
jQuery('#EmpSched_from').bdatepicker({'format':'yyyy-mm-dd','language':'en_us','weekStart':0});
jQuery('#EmpSched_to').bdatepicker({'format':'yyyy-mm-dd','language':'en_us','weekStart':0});
jQuery(document).on('click','#day-grid a.delete',function() {
    if(!confirm('Are you sure you want to delete this item?')) return false;
    var th = this,
        afterDelete = function(){};
    jQuery('#day-grid').yiiGridView('update', {
        type: 'POST',
        url: jQuery(this).attr('href'),
        success: function(data) {
            jQuery('#day-grid').yiiGridView('update');
            afterDelete(th, true, data);
        },
        error: function(XHR) {
            return afterDelete(th, false, XHR);
        }
    });
    return false;
});
jQuery('#day-grid').yiiGridView({'ajaxUpdate':['day-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'day_page','afterAjaxUpdate':function() {
            jQuery('.popover').remove();
            jQuery('a[rel="popover"]').popover();
            jQuery('.tooltip').remove();
            jQuery('a[rel="tooltip"]').tooltip();
        }});
});
/*]]>*/
</script>
</body>
</html>
我希望day表位于EmpSched的create.php中，

JavaScript jQuery v1.9+：

$(function() {

    // when row is clicked
    $('#day-grid tbody:first').on('click', 'tr', function() {

        // get the ID
        var id = $(this).find('td:first').text();

        // select the same option in dropdown list with same value
        $('#EmpSched_fk_id_sched')
            .find("option[value="+ id +"]")
            .prop("selected", "selected");
    });
});
好的，你必须把网格放到create表单中。为此，EmpSched控制器的actionCreate将需要以下附加代码：

$this->render('create', array(
    'model' => $model,
    'emp' => new CActiveDataProvider('day'), // add this line
));
在create.php中添加gridview：

<?php $this->widget('bootstrap.widgets.TbGridView',array(
    'id'=>'day-grid',
    'dataProvider'=>$emp,
...
多亏了刘塞缪尔爵士，我解决了我工作了几天的问题

这就是我所做的。在我的EmpSched\u form.php中

以下是输出：

我希望我能提供截图，但我的声誉太低了，我无法发布照片。我发布了一个链接，先生。我只是想知道这是否可能？感谢您的回复。我只想获取单个数据。就我而言。第一天的身份证将在我的fk身份证计划表中作为hehe提取哦，对不起，先生。我只是个初学者。先生，我马上寄出去。先生，我把这个放在哪里？对不起，先生。我不知道如何将javascript代码放入yii框架中。我将其放入create.php中，然后在代码中，我在$fk_id_sched.findoption[value=+id+]中将id更改为id_day。即使我没有改变，也不会发生任何事情。塞缪尔爵士。我加的。嗯，让桌子可以选择吗？如果我双击一行。它会自动将数据放入fk_id_sched？fk_id_sched字段不会选择表格先生？塞缪尔先生？如果我想选择表，即使没有下拉列表fk_id_sched，它也会获取数据，那该怎么办？ 
$this->render('create', array(
    'model' => $model,
    'emp' => new CActiveDataProvider('day'), // add this line
));

<?php $this->widget('bootstrap.widgets.TbGridView',array(
    'id'=>'day-grid',
    'dataProvider'=>$emp,
...

<div>
<?php echo $form->labelEx($model,'fk_id_sched'); ?>
<?php echo $form->dropDownList($model, 'fk_id_sched', CHtml::listData(
    Schedule::model()->findAll(), 'id_sched', 'sched_name'
)
); ?>
<?php echo $form->error($model,'fk_id_sched'); ?>
</div>

<?php
$this->breadcrumbs=array(
'Emp Scheds'=>array('index'),
'Create',
);

$this->menu=array(
array('label'=>'List EmpSched','url'=>array('index')),
array('label'=>'Manage EmpSched','url'=>array('admin')),
);
?>

<h1>Create EmpSched</h1>

<?php echo $this->renderPartial('_form', array('model'=>$model)); ?>

<?php $this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'day-grid',
'dataProvider'=>$emp,
'columns'=>array(
    'id_day',
    'name',
    'mon',
    'tue',
    'wed',
    'thurs',
    'fri',
    'sat',
    'sun',

),
));
?>
<script>
$(function() {

    // when row is clicked
    $('#day-grid tbody:first').on('click', 'tr', function() {

        // get the ID
        var id = $(this).find('td:first').text();

        // select the same option in dropdown list with same value
        $('#EmpSched_fk_id_sched')
            .find("option[value="+ id +"]")
            .prop("selected", "selected");
    });
});
</script>

$this->render('create', array(
'model' => $model,
'emp' => new CActiveDataProvider('day'), // add this line
));