关于表格中复选框、设置、名称，最后统计的实现

参考网页：

• http://webtips.krajee.com/setup-editable-column-grid-view-manipulate-records/
• http://demos.krajee.com/grid-demo
• http://demos.krajee.com/editable
• http://stackoverflow.com/questions/31622044/yii-2-customize-column-with-form-field-for-editing-with-gridview-widget
• http://stackoverflow.com/questions/31149977/yii2-gridview-set-checkboxcolumn-checked
• http://stackoverflow.com/questions/37473895/how-i-can-process-a-checkbox-column-from-yii2-gridview
• http://www.dyn-web.com/tutorials/forms/checkbox/group.php
• http://thecodeplayer.com/walkthrough/javascript-css3-calculator
• http://www.yii-china.com/post/detail/297.html

一、引言

设置一个人的假期天数，需要填很多信息。比如有哪些假期，每个假期多少天。即使同一种假期，因为人员性质的不同，假期天数也不同。这就要求为该员工提供选择哪些假期的能力，而且还要设置对应假期的天数。选择好后，最好加一个按钮，计算所需天数。而且，复选框可以提前确定选谁，复选过程中，可以实时调整数字大小。这样就可以粗略的实现设置假期天数的功能了。在加减法的时候遇到困难了。

另外，对于基本信息的显示，考虑改版，采用 DetailView，原来的全程 HTML 界面太丑了。

二、准备

想了好几天了，最终决定采用类似下方的实现方式。

<table width="1065"> <tbody> <tr class="firstRow"> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 序号<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 复选框<br/> </td> <td style="border-width: 1px; border-style: solid;" valign="top" width="248"> 名称<br/> </td> <td style="border-width: 1px; border-style: solid;" valign="top" width="248"> 天数<br/> </td> </tr> <tr> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 1<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 复选框 </td> <td style="border-width: 1px; border-style: solid;" valign="top" width="248"> 假期一<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 300（可编辑）<br/> </td> </tr> <tr> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 2<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 复选框 </td> <td style="border-width: 1px; border-style: solid;" valign="top" width="248"> 假期二<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 300（可编辑） </td> </tr> <tr> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 3<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 复选框 </td> <td style="border-width: 1px; border-style: solid;" valign="top" width="248"> 假期三<br/> </td> <td style="word-break: break-all; border-width: 1px; border-style: solid;" valign="top" width="248"> 300（可编辑） </td> </tr> </tbody> </table> <p> <br/> </p>

搜索良久，发现采用 http://demos.krajee.com/grid-demo 和 http://demos.krajee.com/editable 能较好的解决该问题，但是并没有想象中那么完美。为了尽快完成网站，暂时这么决定了。

三、实现方法

这里主要参考网页 http://webtips.krajee.com/setup-editable-column-grid-view-manipulate-records/ 最后放弃了该方案，采用如下方式。（原谅，有些代码不能直接复制出来，只好看着屏幕抄写过来，如有异常，请及时联系，谢谢）

1、安装插件 GridView

使用 composer 安装，可能需要一些依赖，请自行解决。

composer.phar require kartik-v/yii2-editable "*"
composer.phar require kartik-v/yii2-grid "@dev"

2、在 view 里（一）

假设该文件为 ./frontend/views/personinfo/_form_path.php，也即 PersoninfoController 的某个动作调用该文件。

$gridColumns = [
    [
        'class' => '\kartik\grid\CheckboxColumn‘,
        'checkboxOptions' => function($model, $key) {
            return ['value' => $key, 'checked' => $xxx];// $xxx可以自行设置。
        },
    ],
    [
        'attribute' => 'day_default',
        'format' => 'raw',
        'value' => function($model) {
            return Html::textInput('', $model->day_default);
        },
];
echo \kartik\grid\GridView::widget([
    'id' => 'personinfo-set-gridview',
    'dataProvider' => $dataProvider,
    'columns' => $gridColumns,
]);

解释

• 'class' => '\kartik\grid\CheckboxColumn’, 实现复选功能。
• 'attribute' => 'day_default', 该属性的赋值，实现了直接输入。这样给他一个默认值，也可以自行调整了。

3、在 view 里（二）

由于技术所限，不能很好的实现，点击复选框就可以自动更新目标框的数值，或者点击输入就改变目标框的数值。而且改变这些数值，可能出现原来信息的错误，遂加了一个计算的按钮，使用 javascript 计算复选过的数值，并更新目标框的数值。另外增加了一个确认按钮，用于提交。目标框有多个。

采用的 ActiveForm 类，但是默认的都是竖排，样子特别丑。想到了用HTML 表格 table 简单的排版。代码如下。

<table>
<tr>

<td>
<?= Html::button('计算', ['class' => 'btn btn-primary', 'onclick' => $js_calculate]) ?>
</td>

<td>
<?=$form->field($model, 'aim_text')->textInput() ?>
</td>

<td>
<?= Html::submitButton('确认', ['class' => 'btn btn-primary']) ?>
</td>

</tr>
</table>

解释

• $js_calculate 在下文介绍。

4、view 中的 js

这个 js 脚本程序的作用，很简单，找到这些控件，读取这些checkbox 是否选择，决定怎么计算这些数值，并把计算的数值赋予目标控件。内容如下。

var el=document.getElementById('personinfo-set-girdview'); // here id from above setting
var keys=el.getElementsByTagName('tr');
var aim_text=0;
for (var i=0;i<keys.length;i++){
    var items=keys[i].getElementsByTagName('input');
    var need_add=false;
    for(var j in items){
        if(items[j].type==='chekbox' && items[j].checked){
            need_add=true;
        }
        if(need_add && items[j].type==='text'){
            aim_text+=parseInt(items[j].value);
        }
    }
}
document.getElementById('personinfo-aim_text').value=aim_text;

解释

• 当然，这是内容是通过如下的方式赋值给 $js_calculate的

$js_calculate=<<<JS
//这里就是上面的内容啦。
JS

四、其他问题

当然为了给 checkbox提前赋值，还需要好好的传递一个数组过来，而保存选择了哪些项目及各自的数值，还需要传递给服务器，这个仍旧需要好好考虑一下。

另外 js 的 for(var i=0;i<array.length,i++) 跟 for(var i in array) 是不一样的，尤其是在 array[i].getElementById()的时候，一个全是数字，一个还是有字母的，键值不一样。需要注意。