Yii：将CGridview添加到表单中
I am trying to do a selectable table in my create.php connected in another model. If you select a row in the table it will be automatically put in in my dropdown list form.
I have 5 tables which is connected to one another.
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
In my empsched table I wanted to have a table in my create.php (empsched) that will display the CGridView of my day table. and when I double click it a row in the table. My fk_id_sched gets the table. I wanted also to have a modal popup below the table so that it can add another data that I want to fetch in my fk_id_sched.
I was just wondering if this is possible? the id_day is related to fk_id_sched. Where if you double click the table it will fetch the data - the id_day 1 will be fetched as "hehe" in my fk_id_sched form
In my empSched _form.php :
<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'); ?>
In my Day admin.php:
<?php $this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'day-grid',
'dataProvider'=>$model->search(),
'pager'=>array('header'=>''),
'emptyText'=>'Coming soon',
'filter'=>$model,
'columns'=>array(
'id_day',
array(
'name'=>'monday',
'value'=>'$data->monday==null ? "OFF" : $data->monday->name',
),
array(
'name'=>'tuesday',
'value'=>'$data->tuesday==null ? "OFF" : $data->tuesday->name',
),
array(
'name'=>'wednesday',
'value'=>'$data->wednesday==null ? "OFF" : $data->wednesday->name',
),
array(
'name'=>'thursday',
'value'=>'$data->thursday==null ? "OFF" : $data->thursday->name',
),
array(
'name'=>'friday',
'value'=>'$data->friday==null ? "OFF" : $data->friday->name',
),
There are no relations in the empschedule model.
here is the page source sir of my 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&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&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&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&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&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&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&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&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&day_sort=sun">Sun<span class="caret"></span></a></th><th class="button-column" id="day-grid_c8"> </th></tr>
</thead>
<tbody>
<tr class="odd">
<td>hehe</td><td>8</td><td>6</td><td>6</td><td>6</td><td> </td><td> </td><td> </td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/view&id=1"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=1"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&id=1"><i class="icon-trash"></i></a></td></tr>
<tr class="even">
<td>day2</td><td> </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&id=2"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=2"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=3"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=3"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=4"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=4"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=5"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=5"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=6"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=6"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=7"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=7"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=11"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=11"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=12"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=12"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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&id=13"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/update&id=13"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/hris/index.php?r=scheduling/empSched/delete&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">←</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&day_page=2">2</a></li>
<li class="next"><a href="/hris/index.php?r=scheduling/empSched/create&day_page=2">→</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 © 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>
I wanted the day table to be in the create.php of EmpSched,
Okay, you will have to get that grid into the create form. To do that, the actionCreate of your EmpSched controller will need this additional code:
$this->render('create', array(
'model' => $model,
'emp' => new CActiveDataProvider('day'), // add this line
));
In your create.php add the gridview:
<?php $this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'day-grid',
'dataProvider'=>$emp,
...
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");
});
});
Thanks to sir Samuel Liew I solved the problem I was working on for days.
here is what I did. in my EmpSched _form.php
<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>
and in my EmpSched create.php
<?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>
and added this in the EmpSched actionCreate:
$this->render('create', array(
'model' => $model,
'emp' => new CActiveDataProvider('day'), // add this line
));
Here is the output: http://imageshack.us/photo/my-images/600/8pzx.png/
