bootstrap ajax实例代码,bootstrap获取数据的实例代码

通用增删改查

新增类型

编辑类型--%>

删除类型

请选择父级

${type.title}

标题

描述

var $table = $('#table');

var servlet_url = "/manage/type/index";

$("#input1").val("ssss");

$(function() {

$(document).on('focus', 'input[type="text"]', function() {

$(this).parent().find('label').addClass('active');

}).on('blur', 'input[type="text"]', function() {

if ($(this).val() == '') {

$(this).parent().find('label').removeClass('active');

}

});

// bootstrap table初始化

//

$table.bootstrapTable({

url: servlet_url+'?m=ajax_all',

height: getHeight(),

striped: true,

search: true,

searchOnEnterKey: true,

showRefresh: true,

showToggle: true,

showColumns: true,

minimumCountColumns: 2,

showPaginationSwitch: true,

clickToSelect: true,

detailView: true,

detailFormatter: 'detailFormatter',

pagination: true,

paginationLoop: false,

classes: 'table table-hover table-no-bordered',

//sidePagination: 'server',

//silentSort: false,

smartDisplay: false,

idField: 'id',

sortName: 'id',

sortOrder: 'desc',

escape: true,

searchOnEnterKey: true,

maintainSelected: true,

toolbar: '#toolbar',

columns: [

{field: 'state', checkbox: true},

{field: 'id', title: '编号', halign: 'center',align:"center"},

{field: 'title', title: '标题', halign: 'center',align:"center"},

{field: 'pid', title: '父级ID', halign: 'center',align:"center"},

{field: 'description', title: '描述', halign: 'center',align:"center"},

{field: 'createTime', title: '创建时间', halign: 'center',align:"center",formatter: 'timeFormatter'},

{field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}

]

}).on('all.bs.table', function (e, name, args) {

$('[data-toggle="tooltip"]').tooltip();

$('[data-toggle="popover"]').popover();

});

});

function timeFormatter(value,row,index){

return new Date(row.createTime).format("yyyy-MM-dd hh:mm:ss");

}

function actionFormatter(value, row, index) {

return [

'　',

'　',

''

].join('');

}

window.actionEvents = {

'click .like': function (e, value, row, index) {

alert('You click like icon, row: ' + JSON.stringify(row));

console.log(value, row, index);

},

'click .edit': function (e, value, row, index) {

alert('You click edit icon, row: ' + JSON.stringify(row));

//搞修改数据

$("#input1").val(row.title);

$("#input3").val(row.description);

$("#selectpid").val(row.pid);

alert($("#input1").val());

$.confirm({

title:"修改数据",

content:function(){

var self = this;

var h = $("#createDialog").html();

self.setContent($("#createDialog").html());

},

buttons:{

confirm:{

text:"确定",

action:function(){

alert($(".jconfirm-content form input")[0].value)

//发送修改后的数据到服务器端，更新数据库

// $.post(servlet_url+"?m=update",{

// id:row.id,

// title:$(".jconfirm-content form input")[0].value,

// pid:$(".jconfirm-content form select")[0].value,

// description:$(".jconfirm-content form input")[1].value

// },function(txt){

// //服务器端响应内容回调函数

// $.alert(txt.message);

// $("#createDialog").html(ht);

// $table.bootstrapTable('refresh');

// },"json")

}

},

cancle:{

text:"取消",

action:function(){

$("#createDialog").html(ht);

}

}

}

})

console.log(value, row, index);

},

'click .remove': function (e, value, row, index) {

removeByUniqueId = row.id;

alert('You click remove icon, row: ' + JSON.stringify(row));

$.confirm({

title:"提示",

content:"是否永久删除数据？",

buttons:{

confirm:{

text:"确定",

action:function(){

//执行删除操作

$.get(servlet_url+"?m=delete",{'id':row.id},function(txt){

$.alert(txt.message);

$table.bootstrapTable('refresh');

},"json");

}

},

cancle:{

text:"取消"

}

}

})

console.log(value, row, index);

}

};

function detailFormatter(index, row) {

var html = [];

$.each(row, function (key, value) {

html.push('

' + key + ': ' + value + '

');

});

return html.join('');

}

// 新增

var ht = $("#createDialog").html();

function createAction() {

$("#createDialog").html("");

$.confirm({

type: 'dark',

animationSpeed: 300,

title: '新增系统',

content: ht,

buttons: {

confirm: {

text: '确认',

btnClass: 'waves-effect waves-button',

action: function () {

var t =$("#input1").val();

var desc = $("#input3").val();

var pid = $("#selectpid").val();

alert(t+" "+desc);

if(t==""){

$.alert('标题不能为空');

}else{

$.get("/manage/type/index?m=add",{"title":t,"description":desc,"pid":pid},function(txt) {

$("#createDialog").html(ht);

$.confirm({

title:"提示",

content:txt.message,

buttons: {

confirm: {

text: '确认',

btnClass: 'waves-effect waves-button',

action: function () {

$table.bootstrapTable('refresh');

}

}

}

});

},"json");

}

}

},

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

}

// 编辑

function updateAction() {

var rows = $table.bootstrapTable('getSelections');

if (rows.length == 0) {

$.confirm({

title: false,

content: '请至少选择一条记录！',

autoClose: 'cancel|3000',

backgroundDismiss: true,

buttons: {

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

} else {

$.confirm({

type: 'blue',

animationSpeed: 300,

title: '编辑系统',

content: $('#createDialog').html(),

buttons: {

confirm: {

text: '确认',

btnClass: 'waves-effect waves-button',

action: function () {

$.alert('确认');

}

},

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

}

}

// 删除

function deleteAction() {

var rows = $table.bootstrapTable('getSelections');

if (rows.length == 0) {

$.confirm({

title: false,

content: '请至少选择一条记录！',

autoClose: 'cancel|3000',

backgroundDismiss: true,

buttons: {

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

} else {

$.confirm({

type: 'red',

animationSpeed: 300,

title: false,

content: '确认删除该系统吗？',

buttons: {

confirm: {

text: '确认',

btnClass: 'waves-effect waves-button',

action: function () {

var ids = new Array();

for (var i in rows) {

ids.push(rows[i].systemId);

}

$.alert('删除：id=' + ids.join("-"));

}

},

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

}

}

//原型链

Date.prototype.format = function(fmt) {

var o = {

"M+" : this.getMonth()+1, //月份

"d+" : this.getDate(), //日

"h+" : this.getHours(), //小时

"m+" : this.getMinutes(), //分

"s+" : this.getSeconds(), //秒

"q+" : Math.floor((this.getMonth()+3)/3), //季度

"S" : this.getMilliseconds() //毫秒

};

if(/(y+)/.test(fmt)){

fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));

}

for(var k in o) {

if(new RegExp("("+ k +")").test(fmt)){

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));

}

}

return fmt;

}