我有一个带复选框的html表,我想将所选复选框的值传递回我的视图。
我的html表:
<table class="demo-add-niftycheck" data-toggle="table" data-toolbar="#demo-delete-row" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-sort-name="id" data-page-list="[25, 50, 100]" data-page-size="25" data-pagination="true" data-show-pagination-switch="true">
<thead>
<tr>
<th data-checkbox="true">Order ID</th>
<th data-align="center" data-sortable="true">Order ID</th>
<th data-align="center" data-sortable="true">Channel</th>
<th data-align="center" data-sortable="true">Dispatch By Date</th>
<th data-align="center" data-sortable="true">Order Amount</th>
<th data-align="center" data-sortable="true">Status</th>
<th data-align="center" data-sortable="true">Product</th>
</tr>
</thead>
<tbody>
{% for oid,oiid,dbd,stts,tp,sku,qty,chnl in new_orders %}
<tr>
<td><input name="order_id_1" value="{{oid}}" style="display:none"></td>
<td>
<div><input name="order_id" value="{{oid}}" style="display:none">{{oid}}</div>
<div><input name="order_item_id" value="{{oiid}}" style="display:none">{{oiid}}</div>
</td>
<td><input name="channel" value="{{chnl}}" style="display:none">{{chnl}}</td>
<td>{{dbd}}</td>
<td>{{tp}}</td>
.....
我想将{{oid}},{{oiid}},{{chnl}}的值传递回我的django视图。 问题是当我选择一些行时,所有行的数据都会传回我的视图。如何解决这个问题?
demo-add-niftcheck(表类):
$(".demo-add-niftycheck").on('post-body.bs.table', function () {
$(this).find('input:checkbox').not('.form-checkbox input:checkbox').wrap('<label class="form-checkbox form-icon"></label>');
$(this).find('.form-checkbox').niftyCheck();
});
我可以在我的后端捕获数据,如:
order_id_list = request.POST.getlist['order_id']
order_item_id_list = request.POST.getlist['order_item_id']
表jquery:
var $table = $('#demo-custom-toolbar'), $remove = $('#demo-delete-row');
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
});
$remove.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
});
编辑:
我也无法在第一列中传递任何值。即带有复选框的列。我从互联网上获取了这些代码,所以我不知道幕后发生了什么。
data-toggle
属性:
a.fn.bootstrapTable=function(b,c){
var d;return this.each(function(){
var e=a(this),f=e.data("bootstrap.table"),g=a.extend({},h.DEFAULTS,e.data(),"object"==typeof b&&b);if("string"==typeof b){if(a.inArray(b,i)<0)throw"Unknown method: "+b;if(!f)return;d=f[b](c),"destroy"===b&&e.removeData("bootstrap.table")}f||e.data("bootstrap.table",f=new h(this,g))}),"undefined"==typeof d?this:d
},
a.fn.bootstrapTable.Constructor=h,a.fn.bootstrapTable.defaults=h.DEFAULTS,a.fn.bootstrapTable.columnDefaults=h.COLUMN_DEFAULTS,a.fn.bootstrapTable.locales=h.LOCALES,a.fn.bootstrapTable.methods=i,a(function(){
a('[data-toggle="table"]').bootstrapTable()
})