我尝试通过datatables jquery插件中的复选框选择多行,以便将数据传递给另一种形式。
我正在做一些事情,但是我的代码只是返回当前数据表活动页面中的选定行。
这是我的表单,其中填充了来自jquery的数据:
<div class="widget-footer">
<button id="BtnClick" class="btn btn-sm btn-success" type="submit">
صدور
</button>
@using (@Html.BeginForm("LineRegimeSave", "DietTherapy", FormMethod.Post, new { id = "hiddenForm" }))
{
<input type="hidden" name="BreakFast" value="" />
<input type="hidden" name="Snake1" value="" />
<input type="hidden" name="Lunch" value="" />
<input type="hidden" name="Snake2" value="" />
<input type="hidden" name="Snake3" value="" />
<input type="hidden" name="Dinner" value="" />
<input type="hidden" name="Snake4" value="" />
<input type="hidden" name="AdviseText" value="@TempData["Advise"].ToString()" />
<input type="hidden" name="docFooterId" value="@TempData["footerId"].ToString()" />
}
</div>
这是我的查询:
var datasets = {};
$("#BtnClick").click(function () {
$.each(
$("input[type=checkbox]"),
function() {
var catName = $(this).attr('name');
datasets[catName] = {
label: catName,
data: []
};
});
$.each(
$("input[type=checkbox]:checked"),
function () {
var catName = $(this).attr('name');
datasets[catName].data.push($(this).val());
});
var data ={};
$.each(
datasets,
function (item, dt) {
var name = item;
var value = dt['data'].join(",");
data[name] = value;
}
);
$("#hiddenForm").autofill(data);
$("#hiddenForm").submit();
您可以看到我的桌子:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
<i class="fa fa-lg fa-angle-down pull-right"></i>
<i class="fa fa-lg fa-angle-up pull-right"></i>
وعده صبحانه
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0;">
<div class="panel-body no-padding">
<table id="dt_basic" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="datatable_col_reorder_info" style="width: 100%;" width="100%">
<thead>
<tr role="row">
<th data-hide="phone" class="sorting_asc" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 31px;" aria-sort="ascending" aria-label="ID: activate to sort column descending">ردیف</th>
<th data-class="expand" class="expand sorting" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 300px;" aria-label="Name: activate to sort column ascending">رژیم</th>
<th class="sorting" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 50px;" aria-label="Phone: activate to sort column ascending">کالری</th>
<th aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 20px;" aria-label="Phone: activate to sort column ascending">انتخاب</th>
</tr>
</thead>
<tbody>
@{
//string[] cal = new[] {breakfast, snake1, lunch, snake2, snake3, dinner, snake4};
if (Model.Any())
{
int index = 1;
var breakFast = Model.Where(a => a.Mealses.Any(b => b.MealsName == "BreakFast") && a.Calories.ToString() == @ViewBag.cal[0].ToString()).ToList();
foreach (var itDiet in breakFast)
{
var rowCls = "odd";
rowCls = @index / 2 == 0 ? "odd" : "even";
<tr role="row" class="@rowCls">
<td>@index</td>
<td>@itDiet.Diet</td>
<td>@itDiet.Calories</td>
<td class="smart-form">
<label class="checkbox">
<input name="BreakFast" checked="checked" type="checkbox" value="@itDiet.Id">
<i></i>
</label>
</td>
</tr>
index++;
}
index = 1;
}
}
</tbody>
</table>
</div>
</div>
</div>
当我在Visual Studio中检查发布方法时,可以看到我刚刚收到选中的活动页带有复选框的行。您能帮我改善我的jquery代码吗?
更新 如果您想知道数据表源在哪里: DataTables 而且您可能需要将此脚本添加到页面
<script src="~/Scripts/plugin/datatables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/plugin/datatables/dataTables.colVis.min.js"></script>
<script src="~/Scripts/plugin/datatables/dataTables.tableTools.min.js"></script>
<script src="~/Scripts/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/plugin/datatable-responsive/datatables.responsive.min.js"></script>
<script src="~/Scripts/jquery.formautofill.js"></script>