Because I am also learning while writing, so the collation of the more chaotic, the following release my example of the complete code to facilitate the exchange of the test, if there are questions welcome comments
First of all, the table is bootstrap style editing, the main use is ANGULARJS, in order to facilitate and have jquery method, in the test to introduce themselves Bootstrap,angularjs and JQ files.
Overall Code preview:
Html:
<! DOCTYPE html>
<html lang = "en" ng-app = "myModule">
<head>
// Need to introduce BOOTStrap, angularjs and jQuery js, css files
<style>
.pagination .num {
font-size: 22px; color: red;
}
.text {
margin: 0 auto;
border: 1px solid #ccc;
width: 100%;
max-width: 200px;
}
</ style>
<title> Welcome </ title>
</ head>
<body ng-controller = "myCtrl">
<div class = "block">
<div class = "navbar navbar-inner block-header">
<div class = "muted pull-left"> {{kaohzbTitle}} </ div>
</ div>
<div class = "span12" style = "float: left;">
<div class = "table-toolbar">
<button style = "margin-left: 5px;" id = "refresh" ng-click = "refresh ()"
class = "btn btn-success">
<i class = "icon-refresh icon-white"> </ i> Refresh
</ button>
<button ng-disabled = "isdisabled" class = "btn" ng-class = "{'btn-info': isInfo}" id = "savekaohzb"
ng-click = "save ()">
<i class = "icon-edit icon-white"> </ i> Save
</ button>
</ div>
</ div>
<div class = "row-fluid">
<div class = "span6"> </ div>
<table class = "table table-striped table-bordered table-hover"
id = "example" style = "margin-top: 10px;">
<thead>
<tr>
<th style = "width: 20px;" rowspan = "2"> Select All <br> <input type = "checkbox" ng-model = "selectAll"> </ th>
<th style = "text-align: center; width: 50px; vertical-align: middle" rowspan = "2"> Serial number </ th>
<th style = "text-align: center; width: 150px; vertical-align: middle" rowspan = "2"> Name </ th>
<th style = "text-align: center; width: 150px; vertical-align: middle" rowspan = "2"> Date </ th>
<th style = "text-align: center; width: 150px;" colspan = "3"> match team (red) </ th>
<th style = "text-align: center; width: 150px;" colspan = "3"> match team (blue) </ th>
<th style = "text-align: center; width: 150px; vertical-align: middle" rowspan = "2"> score </ th>
<th style = "text-align: center; width: 150px; vertical-align: middle" rowspan = "2"> Description </ th>
<th style = "text-align: center; width: 150px; vertical-align: middle" rowspan = "2"> Player Support Team </ th>
</ tr>
<tr>
<th style = "text-align: center; width: 80px;"> First scene </ th>
<th style = "text-align: center; width: 80px;"> Second scene </ th>
<th style = "text-align: center; width: 80px;"> Description </ th>
<th style = "text-align: center; width: 80px;"> First scene </ th>
<th style = "text-align: center; width: 80px;"> Second scene </ th>
<th style = "text-align: center; width: 80px;"> Description </ th>
</ tr>
</ thead>
<tbody ng-click = "fun ()" id = "page" ng-show = "isshow">
<!-track by tb.id->
<tr ng-repeat = "tb in saveDate"> <!-Only use angularjs to click on a line to select it, which is temporarily not possible->
<td style = "width: 20px;"> <input type = "checkbox" ng-checked = "selectAll"> </ td>
<td style = "text-align: center;"> {{tb.id}} </ td>
<td style = "text-align: center;"> {{tb.zbname}} </ td>
<td style = "text-align: center;"> {{tb.zbtime}} </ td>
<td style = "text-align: center;"> {{tb.zbrul1}} </ td>
<td style = "text-align: center;"> {{tb.zbrul2}} </ td>
<td style = "text-align: center;"> <div class = "text" contenteditable = "true" ng-model = "tb.por"> </ div> </ td>
<td style = "text-align: center;"> {{tb.zbrul2}} </ td>
<td style = "text-align: center;"> {{tb.zbrul1}} </ td>
<td style = "text-align: center;"> <div class = "text" contenteditable = "true" ng-model = "tb.por"> </ div> </ td> <!-2016.1.19 Replace the input box with a compilable div->
<td style = "text-align: center;"> {{tb.score}} </ td>
<td style = "text-align: center;"> <div class = "text" contenteditable = "true" ng-model = "tb.por"> </ div> </ td>
<td>
<select name = "" id = "" ng-change = "changetype (adds)" ng-model = "adds" style = "text-align: center; width: 100%; min-width: 80px; margin-bottom : 0 ">
<option value = "" ng-show = "isShow"> {{tb.type}} </ option>
<option value = "support red party"> support red party </ option>
<option value = "support blue party"> support blue party </ option>
<option value = "both sides are the same"> both sides are the same </ option>
</ select>
</ td>
</ tr>
</ tbody>
</ table>
</ div>
<div class = "pagination">
<ul style = "float: right">
<li id = "previous"> <a href=""> Previous </a> </ li>
<li> <!-For the display of page labels->
<ul id = "page_num_all">
</ ul>
</ li>
<li id = "next"> <a href="" style="border:1px solid #ddd;float:right"> Next page </a> </ li>
</ ul>
<span>
Currently on page <span class = "num" id = "current_page"> </ span>, total <span class = "num" id = "page_all"> </ span>
</ span>
<span> The value of your current operation on select is: </ span> {{typename}}
</ div>
<!-END FORM->
</ div>
</ body>
JS Code:
<script> angular.module ("MyModule", []). Controller (' Myctrl ', function ($scope) {$scope. Kaohzbtitle = "Evaluation index maintenance";
$scope. Search = new Object ();
$scope. Isdisabled=false;
$scope. Isinfo=false; $scope. savedate= ""//To save the original data//$http. Post request form data//imitate requested data var datalist=[{id:1,zbname: "Central Asia Division Competition", Zbtime: "2015-1 2-03 ", Zbrul1:" Victory ", Zbrul2:" Failure ", Por:" Please enter description ", Score:" 2:1 ", type:" Support Red Side "},{id:2,zbname:" Japan and South Korea Division competition ", Zbtime:" 2015-11-11 " , ZBRUL1: "Victory", Zbrul2: "Victory", Por: "Please enter description", Score: "2:1", type: "Support Blue Side"},{Id:3,zbname: "European and American Division competition", Zbtime: "2015-3-03", ZBRUL1: "Failure", Zbrul2: "Victory", Por: "Please enter description", Score: "2:1", type: "Both sides are the same"},{Id:4,zbname: "Middle East Division Competition", Zbtime: "2016-1-05", ZBRUL1 : "Victory", Zbrul2: "Failure", Por: "Please enter description", Score: "2:1", type: "Support Blue Side"},{id:5,zbname: "Beijing Division Competition", Zbtime: "2014-12-23", ZBRUL1: "Failure" , Zbrul2: "Victory", Por: "Please enter the description content", Score: "2:1", type: "Both sides are the same"},{Id:6,zbname: "Korea Division Competition", Zbtime: "2015-11-01", ZBRUL1: "Failure", ZBRUL2: "Victory", Por: "Please enter descriptive content", Score: "2:1", type: "The same both sides"},{Id:7,zbname: "Japan Division Competition", Zbtime: "2011-1-23", Zbrul1: "Victory", Zbrul2: "Failure", Por: "Please enter the description content", Score: "2:1", type: "Support Red Side"},{id:8,zbname: "Central Asia Division Competition", Zbtime: "2013-12-15", Zbrul1: "Defeat", Zbrul2: "Victory ", Por:" Please enter description ", Score:" 2:1 ", type:" Support Blue Side "},{id:9,zbname:" Central Asia Division Competition ", Zbtime:" 2015-10-17 ", ZBRUL1:" Failure ", Zbrul2:" Victory ", Por : "Please enter the description", Score: "2:1", type: "Support Red Side"},{id:10,zbname: "Central Asia Division Competition", Zbtime: "2015-11-21", Zbrul1: "Victory", Zbrul2: "Victory", Por: " Please enter the description ", Score:" 2:1 ", type:" Support Blue Side "},{id:11,zbname:" Central Asia Division Competition ", Zbtime:" 2015-2-02 ", ZBRUL1:" Failure ", ZBRUL2:" Failure ", Por:" Please enter the description ", Score:" 2:1 ", type:" Support Red Side "},{id:12,zbname:" Central Asia Division Competition ", Zbtime:" 2015-2-05 ", Zbrul1:" Victory ", Zbrul2:" Failure ", Por:"
Please enter the description ", Score:" 2:1 ", type:" Both sides are the same "}]; $scope. Fun=function () {var e=window.event| |
Arguments[0]; var src=e.srcelement| |
E.target;
if (src.nodename== "TD") {var par=src.parentnode;
var sd=par.getelementsbytagname ("TD") [0];
if (sd.firstchild.checked==true) {sd.firstchild.checked=false;
}else{$ ("tr TD"). attr ("checked", false);
Sd.firstchild.checked=true;
$scope. Refresh=function () {//Click the Refresh button to display the table $scope. savedate=datalist;
Console.log ("End of assigned data");
$scope. $watch ("Savedate", function () {//2016.1.20 The Listener list to generate data and perform a refresh list when a change occurs table_page ();
$scope. Isshow=true;
});
$scope. Save=function () {//Page Submit button Console.log ("Ready to save");
Console.log ($scope. savedate);//As long as the data changes, automatically saved to the original data list}//Table paging functionality function Table_page () {var show_page=5;//the number of bars displayed per page
var page_all=$ ("#page"). Children (). Size ()//total number of bars var current_page=1;//current page//Console.log (Page_all); var page_num=math.ceil (page_all/show_page);//Total number of pages Var current_num=0;//the counter var li= "" For generating the page mark "";//Page header element while (PAGE_NUM&G T;current_num) {///loop Generate page Mark element li+= ' <li class= ' page_num ' ><a href= ' Javasctip: (0) "> ' + (current_num+1) + ' </a
></li> ';
current_num++; $ ("#page_num_all"). HTML (LI),//Add page superscript to page $ (' #page tr '). CSS (' Display ', ' none ');/Set Hide $ (' #page tr '). Slice (0, show_p Age). CSS (' Display ', ');//Setting Displays $ ("#current_page"). HTML (" " +current_page+ " ");//Show current Page $ ("#page_all"). HTML ("&nbSP; " +page_num+ " " displays the total number of pages $ ("#previous"). Click (function () {//prev var new_page=parseint ("#current_page"). Text ()
)-1;
if (new_page>0) {$ ("#current_page"). HTML (" " +new_page+ " ");
Tab_page (New_page);
}
}); $ ("#next"). Click (function () {//Next page var new_page=parseint ($ ("#current_page"). Text ()) +1;//the current page mark if (New_page<=page_
num) {//To determine whether the last or first page $ ("#current_page"). HTML (" " +new_page+ " ");
Tab_page (New_page);
}
});
$ (". Page_num"). Click (function () {//page Mark jump Var new_page=parseint ($ (this). text ());
Tab_page (New_page);
}); function Tab_page (index) {//Toggle page of page start= var (index-1) *show_page;//start intercepting the page mark Var end=start+show_page;//intercept the number of $ (
' #page '). Children (). CSS (' Display ', ' none '). Slice (start, end). CSS (' Display ', ');
Current_page=index;
$ ("#current_page"). HTML (" " +current_page+ " "); "}}). directive (' contenteditable ', function () {//Custom Ngmodel properties can be used in other elements such as Div return {restrict: ' A ',//As a property using require: '? Ngmodel ',//The function substituted by this directive link:function (scope, element, Attrs, Ngmodel) {if (!ngmodel
) {return; }//Do No if no ng-model//Specify the How UI should is updated ngmodel. $render = function () {element.htm L (Ngmodel $viewValue | |
'');
}; Listen for change events to enable binding Element.on (' Blur keyup change ', function () {scope. $apply (READVIEWT
EXT);
});
No need to initialize, Angularjs'll initialize the text based on Ng-model attribute//Write data to the model
function Readviewtext () {var html = element.html (); When we clear the content editable the browser leaves a <br> behind//If STRIP-BR attributes is provided the
N We strip this out if (attrs.stripbr && html = = ' <br> ') {html = ';
Ngmodel. $setViewValue (HTML);
}
}
};
}) </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
