http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
HTML--------------
<table id= "Mytab" class= "Table Table-hover" ></table>js-----------------------$scope. pagesize=20; Number of Bars $scope.orgnizationname = ""; Name $scope.mustcheck = 0; Is it necessary to check $scope.deletearr = []//Store the task to be deleted id$scope.request = function (senddata) {hikglobalhttpservice.requestbypost ("/ Api/organization/search ", SendData, function (data, status) {if (status) {//Layer.close (loading); $scope. Totalnum = Data.totalnum; Number of data bars if (Data.result = = NULL | | data.result.length = = 0) {$scope. Tabledata = []; $rootScope. pagenum = 1;$ Rootscope.totapage = 1;} else{$scope. tabledata = Data.result; $rootScope. totapage = Math.ceil ($scope. totalnum/$scope. pageSize);//Total page number}$ (' # Mytab '). bootstraptable ({url: ', columns: [{checkbox:true,width: ' 3% '},{width: ' 4% ', title: ' Serial Number ', align: ' center ', Formatter:function (value, row, index) {return index+1;}},{width: ' 12% ', title: ' Responsible organization name ', align: ' center ', formatter: function (val,row,index) { return ' <span class= "tasknameorg f_blue" title= "' +row.orgnizationname+ '" > ' + Row.orgnizationname+ ' </span> ';},events:{"click. Tasknameorg": function (E,value,row,index) {$ ('. Mask_texts '). Hide (); $ ('. Input_ Contents '). Hide (); $ ('. Input_contentshows '). HTML (row.orgnizationname). CSS ({border: "none"}); $ ('. Mask_text_shows ') ). HTML (row.description). CSS ({border: "none"}), var layer = Layui.layer;layer.open ({type:1,area: [' 462px ', ' 345px '], Title: [' Details ', ' font-size:15px;background: #e60012; color: #fff; '],content: $ ('. Mask '), btn: [' OK ', ' Cancel '],yes:function ( Index, Layero) {layer.close (index),//If the Yes callback is set, manual shutdown is required maskhide ();},btn2:function () {maskhide ();}}); CLOSEBTN ();},//display}},{width: ' 8% ', title: ' Description ', align: ' center ', formatter:function (value,row,index) {return ' <span title= "' +row.description+ '" > ' +row.description+ ' </span> ';}}, {width: ' 6% ', title: ' Operation ', align: ' center ', Formatter:function (value,row,index) {return[' <span class= ' editdata ' ></span> ', ' <span class= ' DeleteData "></span>"].join ("");},events:{"click. EditData": $scope. editdatatask,//edit "click. DeleteData": Function (E,Value,row,index) {//remove var abarbeitungpopups = Layer.open ({content: "confirm delete?") ", Title:", closebtn:false,btn: ["OK", "Close"],yes:function () {layer.close (abarbeitungpopups); var dateid=[]; Dateid.push (row.id); Hikglobalhttpservice.requestbypost ("/delete", {Id:dateid}, function (data, status) {if (status) {$rootScope. querydata ();//Delete refresh})}) }}}],data: $scope. Tabledata,height: ' 100% ', oncheckall:function (row) {//Select all $scope.deletearr = [] ; for (var i = 0; i < row.length; i++) {$scope. Deletearr.push (row[i].id);}},onuncheckall:function (row) {//deselect Select all $ Scope.deletearr = [];},oncheck:function (row) {//single-row check $scope.deletearr.push (row.id);},onuncheck:function (row) {// Cancels the line for (var i = 0; i < $scope. deletearr.length; i++) {if ($scope. deletearr[i] = = row.id) {$scope. Deletearr.splice (i,1); Break;}}}) $rootScope. Pagejudge ();} else{//layer.close (loading); Layer.open ({content:data.message})})} $scope. Request ({id:1,pagesize:$ Scope.pagesize,pagenum: $rootScope. pagenum});//user Id$scope.editdatatask = function (E,value,row,index) {//Edit $ (' #inputData '). Val (Row.orgnizationname); $ (' #input_text '). Val (row.description); var layer = Layui.layer; Layer.open ({type:1,area: [' 462px ', ' 345px '],title: [' description ', ' Font-size:15px;background: #e60012; color: #fff; '],content : $ ('. Mask_edit '), btn: [' OK ', ' Cancel '],yes:function (index, Layero) {layer.close (index);//maskhide (); var taskinputname = $ (' #inputData '). Val ();//var taskdescription = $ (' #input_text '). Val ();//$scope. editdate= function () {//edit var Requestbody = {};requestbody.orgnizationname = Taskinputname;requestbody.description = taskDescription; Requestbody.id = Row.id;var PostData = requestbody; Hikglobalhttpservice.requestbypost ("/update", PostData, function (data, status) {if (status) {if (data.status== " SUCCESS ") {$rootScope. Querydata ();//delete refresh}else{var abarbeitungpopups = Layer.open ({content:data.message,title:" ", CLOSEBTN:FALSE,BTN: ["OK"],yes:function () {layer.close (abarbeitungpopups); })} });}; if (taskinputname!= ") {$scope. editdate ();} Else{var AbarbeituNgpopups = Layer.open ({content: "* is required", title: ", closebtn:false,btn: [" OK "],yes:function () {Layer.close ( abarbeitungpopups); })} },btn2:function () {maskhide ();}); CLOSEBTN ();
} $rootScope. Querydata = function () {//Search $ ("#mytab"). Bootstraptable (' destroy ');//clear if ($scope. Orgnizationname = = "") { var tasksname = null; }else{var tasksname = $scope. Orgnizationname;} var senddata = {id: $rootScope. OrgID,//user ID $rootScope. OrgID pageSize: $scope. PageSize,//per page Pagenum: $rootScope. Pagenum,//Current page number Orgnizationname:tasksname,} $scope. Request (SendData); }//Reset the search condition $scope. reset = function () {$scope. Orgnizationname = "";
} $scope. Add_task = function () {//Add $ (' #inputData '). Val (""); $ (' #input_text '). Val (""); var layer = Layui.layer; Layer.open ({type:1, area: [' 462px ', ' 345px '], title: [' Add responsible organization ', ' font-size:15px;background: #e60012; color: #fff; '], Content: $ ('. Mask_edit '), btn: [' OK ', ' Cancel '], Yes:function (index, Layero) {var taskinputname = $ (' #inputData '). Val (); VA R taskdescription = $ (' #input_text '). Val (); if (taskinputname!= ") {var requestbody = {}; requestbody.orgnizationname = taskinputname; requestbody.description = Taskdescription; var postdata = requestbody; Hikglobalhttpservice.requestbypost ("/api/organization/add", PostData, function (data, status) {if (status) {if ( data.status== "SUCCESS") {$rootScope. Querydata ();//Refresh}else{var abarbeitungpopups = Layer.open ({content:data.message , title: "", Closebtn:false, btn: ["OK"], yes:function () {layer.close (abarbeitungpopups); }}),} }}); Layer.close (index); If you set the Yes callback, you need to manually close the maskhide (); }else{$ ('. Prompt '). Stop (). Animate ({top: ' 2px '}); }}, Btn2:function () {maskhide ();}}); CLOSEBTN (); } $scope. Deletetask = function () {//remove var idstr = ""; for (var i = 0; i < $scope. deletearr.length; i++) {if (i = = $scope. deletearr.length-1) {idstr + = $scope. Deletearr[i];} else{Idstr + = $scope. Deletearr[i] + ",";}} var datastrarr=idstr.split (",");//split into string array var dataintarr=[];//save converted integer string int type
Datastrarr.foreach (function (Data,index,arr) {Dataintarr.push (+data);}); var abarbeitungpopups = Layer.open ({content: "confirm delete?") ", Title:", Closebtn:false, btn: ["OK", "close"], yes:function () {layer.close (abarbeitungpopups); Hikglobalhttpservice.requestbypost ("/del", {Id:dataintarr}, function (data, status) {if (status) {$ Rootscope.querydata ();//Delete Refresh}})})}----------------------ForEach compatible ie8if (typeof Array.prototype.forEach! = ' Functi On ') {//Compatible Ie8Array.prototype.forEach = function (callback) {for (var i = 0; i < this.length; i++) {callback.apply (this, [t His[i], I, this]);}};}
Bootstrap table combined with ANGLARJS with full selection and no selection (-)