bootstrapTableカスタムajaxメソッド



Bootstraptable Custom Ajax Method



bootstrapTableは、ajaxメソッドをカスタマイズし、ajaxリクエストによって返されたデータを取得して、bootstrapTableに表示できます。このように、私はそれが単純で一般的だと思います。この記事では、テーブルで選択されたデータを取得するための簡単な追加と削除、およびボタンが使用可能かどうかも追加します。これらはより一般的に使用されます。



index.html



bootstrap-table-demo .form-inline .form-group input[type=text], .form-inline .form-group select{ width:120px }

bootstrap-table

ID: Name: Price: Please select $1 $2 $3 $4
Add edit View delete refresh
ID Name Price
/ / Custom ajax method function ajaxRequest(params){ //debugger $.ajax({ url: '/bootstrap-table/data4.json', type: 'POST', dataType: 'json', success: function(rs){ console.log(rs) var message = rs.array Params.success({ //Note total: rs.total, rows: message }) //debugger }, error: function(rs){ console.log(rs) } }) } var $table = $('#table'), $add = $('#add'), $edit = $('#edit'), $look = $('#look'), $delete = $('#delete'), $refresh = $('#refresh') // button available or not $edit.prop('disabled', true) $look.prop('disabled', true) $delete.prop('disabled', true) $table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function() { var bool = !($table.bootstrapTable('getSelections').length && $table.bootstrapTable('getSelections').length == 1) $edit.prop('disabled', bool) $look.prop('disabled', bool) $delete.prop('disabled', bool) }) /** * Get the selected data as an array of objects */ function getSelections() { return $.map($table.bootstrapTable('getSelections'), function(row) { return row }) } //Refresh $refresh.on('click', function(){ $table.bootstrapTable('refresh') }) //Add to $add.on('click', function(){ layer.open({ type: 2, Title: 'Add item', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'add.html' }) }) //View $look.on('click', function(){ var row = getSelections()[0] var id = row.id var name = row.name var price = row.price //debugger layer.open({ type: 2, Title: 'View product', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price +'&type=look' }) }) //edit $edit.on('click', function(){ var row = getSelections()[0] var id = row.id var name = row.name var price = row.price layer.open({ type: 2, Title: 'Edit product', shadeClose: false, shade: 0.8, area: ['50%', '60%'], content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price , End: function () { // finally execute reload location.reload() } }) }) //delete $delete.on('click', function(){ var ids = getSelections() Layer.confirm('Do you want to delete the current ' + ids.length + 'bar data?', { Btn: ['yes', 'no'] }, function() { delServer(ids) }) }) //delete function delServer(ids){ Layer.msg('delete successfully') }

data4.json

{ 'code': 0, 'total': 1314, 'message': 'success', 'array' : [ { 'id': 0, 'name': 'Item 0', 'price': '$1' }, { 'id': 1, 'name': 'Item 1', 'price': '$1' }, { 'id': 2, 'name': 'Item 2', 'price': '$2' }, { 'id': 3, 'name': 'Item 3', 'price': '$3' }, { 'id': 4, 'name': 'Item 4', 'price': '$1' }, { 'id': 5, 'name': 'Item 5', 'price': '$1' }, { 'id': 6, 'name': 'Item 6', 'price': '$1' }, { 'id': 7, 'name': 'Item 7', 'price': '$1' }, { 'id': 8, 'name': 'Item 8', 'price': '$1' }, { 'id': 9, 'name': 'Item 9', 'price': '$1' } ] }

edit.html

edit .form-group{ width:90% margin: 15px auto } ID: Name: Price: Please select $1 $2 $3 $4 / / Give jq extension method (function ($) { $.getUrlParam = function (name) $)') var r = window.location.search.substr(1).match(reg) if (r != null) return unescape(r[2]) return null })(jQuery) //alert($.getUrlParam('id')) var index = parent.layer.getFrameIndex(window.name) $('#close').on('click', function(){ parent.layer.close(index) }) // var typelook = $.getUrlParam('type') //Initialization data initData() if(typelook){ $('#submit').hide() $('input').attr('disabled',true) $('select').attr('disabled',true) $('#close').attr('disabled', false) } function initData(){ var id = $.getUrlParam('id') var name = $.getUrlParam('name') var price = $.getUrlParam('price') $('#id').val(id) $('#name').val(name) $('#price').val(price) } $('#submit').click(function(){ Layer.msg('Modified successfully') setTimeout(function (){ parent.layer.close(index) }, 1000) })