1.JQuery查找元素
例:将表格的单元格中件数和重量差异不为0的数据标红
代码如下:
<style>
.notice{
color: red;
}
.right{
color: green;
}
</style>
<table class="table table-bordered" id="wms-list">
<tr>
<td colspan="12" class="type_title">库存清单</td>
</tr>
<tr id="wms-title">
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">存货名称</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">等级</label></td>
<td colspan="2" class="item-label" width="20%"><label class="control-label" style="white-space:nowrap;">入库单号</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统件数(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点件数(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">件数差异(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">包装规格</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统重量(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点重量(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">重量差异(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">差异说明</label></td>
</tr>
<?php foreach ($dataProvider->getModels() as $k => $detail){ ?>
<tr class="data-row">
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[id][]" value="<?= $detail->id ?>"></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_info_name ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_grade_info_name ?></td>
<td colspan="2" align="center" style="white-space:nowrap;"><?= Html::a($detail->wms_herb_in_sheet_number, ['wms-product-in-sheet/view', 'id' => $detail->wms_herb_in_sheet_id]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_system_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_package_num[]')->textInput(['type' => 'number', 'step' => '1', 'min' => '0', 'style'=>'text-align:center;', 'disabled' =>true, 'value'=>$detail->wms_check_detail_check_package_num]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;>"><?= $detail->wms_check_detail_diff_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_spec_name[]')->textInput(['type' => 'text', 'style'=>'text-align:center;', 'disabled' =>true, 'value'=>$detail->wms_check_detail_spec_name]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_weight[]')->textInput(['type' => 'number', 'step' => '0.001', 'min' => '0', 'style'=>'text-align:center;', 'disabled' =>true,'value'=>\common\models\Base::weightBcdiv($detail->wms_check_detail_check_weight)]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_diff_weight) ?></td>
<td colspan="1"><?= $form->field($detail, 'wms_check_detail_diff_note[]')->textInput(['type' => 'text', 'disabled' =>true, 'value'=>$detail->wms_check_detail_diff_note]) ?></td>
</tr>
<?php } ?>
</table>
JQuery的代码如下:
$(function() {
$.each($(".data-row"), function(k, v) {
var diff_package_num = Number($(v).find("td").eq(6).text()).toFixed(0)
if(diff_package_num != 0){
$("tr.data-row").find("td").eq(6).addClass("notice");
}
});
$.each($(".data-row"), function(k, v) {
var diff_weight = Number($(v).find("td").eq(10).text()).toFixed(2);
if(diff_weight != 0){
$("tr.data-row").find("td").eq(10).addClass("notice");
}
});
});
4.JQuery的事件
例:使用JQuery的键盘keyup事件和change事件结合实现输入框的双向数据绑定
表格如下:
<table class="table table-bordered" id="wms-list">
<tr>
<td colspan="12" class="type_title">库存清单</td>
</tr>
<tr id="wms-title">
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">存货名称</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">等级</label></td>
<td colspan="2" class="item-label" width="20%"><label class="control-label" style="white-space:nowrap;">入库单号</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统件数(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点件数(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">件数差异(袋)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">包装规格</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">系统重量(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">盘点重量(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">重量差异(公斤)</label></td>
<td colspan="1" class="item-label"><label class="control-label" style="white-space:nowrap;">差异说明</label></td>
</tr>
<?php foreach ($dataProvider->getModels() as $k => $detail){ ?>
<tr >
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[id][]" value="<?= $detail->id ?>"></td>
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[wms_check_detail_system_package_num][]" value="<?= $detail->wms_check_detail_system_package_num ?>"></td>
<td colspan="1" style="display: none;"><input type="hidden" name="WmsCheckDetail[wms_check_detail_system_weight][]" value="<?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?>"></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_info_name ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->common_producer_herb_grade_info_name ?></td>
<td colspan="2" align="center" style="white-space:nowrap;"><?= Html::a($detail->wms_herb_in_sheet_number, ['wms-product-in-sheet/view', 'id' => $detail->wms_herb_in_sheet_id]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_system_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_package_num[]')->textInput(['type' => 'number', 'step' => '1', 'min' => '0', 'align'=>'center', 'value'=>$detail->wms_check_detail_check_package_num]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $detail->wms_check_detail_diff_package_num ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_spec_name[]')->textInput(['type' => 'text', 'value'=>$detail->wms_check_detail_spec_name]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_system_weight) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= $form->field($detail, 'wms_check_detail_check_weight[]')->textInput(['type' => 'number', 'step' => '0.001', 'min' => '0','value'=>\common\models\Base::weightBcdiv($detail->wms_check_detail_check_weight)]) ?></td>
<td colspan="1" align="center" style="white-space:nowrap;"><?= \common\models\Base::weightBcdiv($detail->wms_check_detail_diff_weight) ?></td>
<td colspan="1" align="left"><?= $form->field($detail, 'wms_check_detail_diff_note[]')->textInput(['type' => 'text', 'value'=>$detail->wms_check_detail_diff_note]) ?></td>
</tr>
<?php } ?>
</table>
JQuery的代码如下:
$("input").change(function(){
var name = $(this).attr("name");
var value = $(this).val();
if(name == "WmsCheckDetail[wms_check_detail_check_package_num][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(1).find(":hidden").val();
var diff_value = Number(system_value) - Number(value);
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).text(diff_value);
if (diff_value != 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).removeClass("notice");
}
}
if(name == "WmsCheckDetail[wms_check_detail_check_weight][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(2).find(":hidden").val();
var diff_value = (Number(system_value) - Number(value)).toFixed(2);
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).text(diff_value);
if (!diff_value == 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).removeClass("notice");
}
}
});
$("input").keyup(function(){
var name = $(this).attr("name");
var value = $(this).val();
if(name == "WmsCheckDetail[wms_check_detail_check_package_num][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(1).find(":hidden").val();
var diff_value = Number(system_value) - Number(value);
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).text(diff_value);
if (diff_value != 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(8).removeClass("notice");
}
}
if(name == "WmsCheckDetail[wms_check_detail_check_weight][]"){
var system_value = $(this).parent("div").parent("td").parent("tr").find("td").eq(2).find(":hidden").val();
var diff_value = (Number(system_value) - Number(value)).toFixed(2);
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).text(diff_value);
if (!diff_value == 0){
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).addClass("notice");
}else {
$(this).parent("div").parent("td").parent("tr").find("td").eq(12).removeClass("notice");
}
}
});