<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<!--views/component/commomopinion/opinionlist.jsp--
<% @include file= "/web-inf/views/commons/common.jsp"%>
<% @include file= "/web-inf/views/themes/bootstrap_theme.jsp"%>
<% @include file= "/web-inf/views/commons/bootstrap_datetimepicker.jsp"%>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "keywords" content= ""/>
<meta name= "description" content= ""/>
<meta content= "Telephone=no" name= "format-detection"/><!------ignore digital auto-identification ask phone number------->
<meta content= "Email=no" name= "format-detection"/><!------Ignore auto-Identify mailbox------->
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
<!--about X-ua-compatible--
<meta http-equiv= "x-ua-compatible" content= "ie=6" ><!--use IE6-
<meta http-equiv= "x-ua-compatible" content= "ie=7" ><!--use IE7-
<meta http-equiv= "x-ua-compatible" content= "ie=8" ><!--use IE8-
<meta name= "renderer" content= "Webkit|ie-comp|ie-stand" >
<title> Common Views List </title>
<link rel= "stylesheet" href= "${ui_frame_path}/data-tables/1.10.5/extensions/styling/bootstrap/ DataTables.bootstrap.css ">
<link href= "${ui_frame_path}/bootstrap/3.3.4/css/bootstrap.min.css" type= "Text/css" rel= "stylesheet" >
<link href= "${css_path}/jquery-ui.css" type= "Text/css" rel= "stylesheet"/>
<link href= "${css_path}/mstyle.css" type= "Text/css" rel= "stylesheet"/>
<link href= "${css_path}/font-awesome.min.css" type= "Text/css" rel= "stylesheet"/>
<script type= "Text/javascript" src= "${ui_frame_path}/data-tables/1.10.5/js/jquery.datatables.min.js" ></ Script>
<script type= "Text/javascript" src= "${ui_frame_path}/data-tables/1.10.5/extensions/styling/bootstrap/ DataTables.bootstrap.js "></script>
<script type= "Text/javascript" src= "${ui_modules_path}/uniflow/autorefresh.js" ></script>
<script type= "Text/javascript" src= "${ui_modules_path}/uniflow/tools.js" ></script>
<script type= "Text/javascript" src= "${static_resources_path}/websrv-potal/js/bootstrap.min.js" ></script >
<script type= "Text/javascript" src= "${js_path}/myopinion/myopinion.js" ></script>
<body>
<div class= "Container-fluid" style= "margin-top:10px" >
<div class= "Row-fluid" >
<div class= "Span12" id= "Content" >
<div class= "Row-fluid" >
<div class= "Span12" >
<div class= "Btn-toolbar" >
<div class= "Pull-right" >
<div class= "Input-append" >
<input type= "text" placeholder= "Fuzzy Query" id= "fuzzy-search-content" style= "height:33px;border-radius:4px 4px 4px 4px;" >
<div class= "Btn-group" >
<button type= "button" class= "btn" id= "Fuzzy-search" ><i class= "fa fa-search" ></i></button>
</div>
</div>
</div>
<button type= "button" class= "btn btn-primary btn-w" id= "Btn-add" ><i class= "FA fa-plus" ></i> add </ Button>
<button type= "button" class= "btn btn-primary btn-w" id= "Btn-alldel" ><i class= "fa fa-remove" ></i> Bulk Delete </button>
</div>
</div>
</div>
<div class= "Block Info-block" id= "User-view" style= "Display:none;" >
<div class= "block-content info-content clearfix" >
<div style= "Float:left;" >
<label class= "Prop-name" > Views:</label>
<input type= "text" id= "Opinion-edit" style= "width:280px;height:33px;border-radius:4px 4px 4px 4px;" Name= "Extn-add "/>
</div>
<div class= "Pull-right" >
<button type= "button" class= "btn btn-primary btn-w" id= "Opinion-edit-save" > Save </button>
</div>
</div>
</div>
<div class= "Block Info-block" id= "User-add" style= "Display:none;" >
<div class= "block-content info-content clearfix" >
<form id= "Form-add" style= "MARGIN:0PX;PADDING:0XP;" >
<div style= "Float:left;" >
<label class= "Prop-name" > Views:</label>
<input type= "text" id= "Opinion-add" style= "width:280px;height:33px;border-radius:4px 4px 4px 4px;" Name= "Extn-add" />
</div>
<div class= "Pull-right" >
<button type= "button" class= "btn btn-primary btn-w" onclick= "saveaddopinion ()" id= "Btn-save-add" > OK add </ Button>
<button type= "button" class= "btn btn-cancel" onclick= "Canceladdopinion ()" > Cancel </button>
</div>
</form>
</div>
</div>
<div class= "Row-fluid" >
<div class= "Span12" id= "Div-table-container" >
<table class= "Table table-striped table-bordered table-hover table-condensed" id= "drafttasktable" cellspacing= "0" Width= "100%" >
<thead>
<tr>
<th width= "10px" >
<input type= "checkbox" Name= "Cb-check-all" id= "Cb-check-all" >
</th>
<th width= "40px" > Serial number </th>
<th> Opinions </th>
<th > Operations </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "Text/javascript" >
</script>
$ (document). Ready (function () {
var table = $ (' #draftTaskTable '). DataTable ();//drafttasktable is the ID of the table in the JSP
Table.state.clear ();//Clear the original state
Inittable ();
});
var _datatablesinstance = undefined;
function Inittable (EXT) {
var numcount = 1;
var option = {
"Bpaginate": true,//one line display number selector two mates
"Blengthchange": true,//one line display number selector two mates
"Alengthmenu": [5, 10, 15, 20, 25],//footer drop-down Select the setting to display the number of rows of data
"Bstatesave": true,//switch, whether to open the client status record function, record the original page to show how many records
"Bfilter": false,//Remove default Search box
"Bsort": false,//sort
"Bjqueryui": false,
"Idisplaylength": 5,//page Display number pagesize
"Bautowidth": true,//adaptive width
"Spaginationtype": "Full_numbers",//Detailed paging group, can support jump directly to a page
"Sajaxdataprop": "AData",
"Bdestroy": true,
"Bprocessing": true,//Show progress bar
"Bserverside": true,//service-side paging
"Sdom": "rt< ' bottom ' ilp< ' clear ' >>",
"Sajaxsource": framework_base_path+ "/myopinion/getopinionlist",//action path for loading data
"Sservermethod": "POST",
"Aocolumns": [
{"Mdata": null, "Mrender": function (data,type,full) {//data initialized to be the same as the number of columns in thead of table
Return ' <input type= ' checkbox ' id= ' +data.id+ ' class= ' iCheck ' name= ' chosecheck ' > ';
}
},
{"Mdata": null, "Targets": 0},
{"Mdata": "Opinionname"},
{"Mdata": null, "Mrender": function (data,type,full) {
Return ' <button type= ' button "class=" btn Btn-small "id=" moveUp "> Move up </button> <button type=" button "id=" MoveDown "class=" btn Btn-small "> Move Down </button> ' +
' <button type= ' button "class=" btn Btn-small "id=" Btn-del "> Delete </button> <button type=" button "class=" btn Btn-small "id=" Btn-edit "> Modify </button>";
}
}
],
Remove null error messages to avoid displaying null
"Aocolumndefs": [{
Sdefaultcontent: ",
Atargets: [' _all ']
} ],
"Olanguage": {
"sURL": Ui_frame_path + "/data-tables/1.10.5/extensions/language/chinese.json"
},
"Fnserverdata": Function (ssource, Aodata, Fncallback) {
Aodata.push ({"Name": "Sdata", "Value": Json.stringify (Sdata)});
$.ajax ({
"Type": ' Post ',
"url": ssource,
"DataType": "JSON",
"Data": {
"Aodata": json.stringify (Aodata),
"Opinionname": $ (' #fuzzy-search-content '). Val ()
},
"Success": function (RESP) {
Fncallback (RESP);
},
"Error": function (RESP) {
Alert ("error;;");
}
});
},
"Fndrawcallback": function () {
var API = This.api ();
var startindex= api.context[0]._idisplaystart;//Gets the number of bars to start on this page
Api.column (1). nodes (). each (function (cell, i) {
Here StartIndex + i + 1, will appear the page number is discontinuous, mainly because of startIndex reason, remove can.
cell.innerhtml = StartIndex + i + 1;
});
}
};
var sdata = {
Sdata:[{name: ' Opinionname ', Value: $ (' #fuzzy-search-content '). Val ()}]
};
if (EXT) {
option = $.extend (true, option, ext);
}
_datatablesinstance = $ ("#draftTaskTable"). DataTable (option);
$ ("#btn-add"). Click (function () {
Usermanage.additeminit ();
});
$ ("#fuzzy-search"). Click (function () {
Usermanage.searchiteminit ();
});
$ ("#btn-alldel"). Click (function () {
var arritemid = [];
$ ("tbody:checkbox:checked"). each (function () {
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
Arritemid.push (item);
});
Usermanage.deleteitem (Arritemid);
});
$ ("#opinion-edit-save"). Click (function () {
Usermanage.edititemsubmit ();
});
$ (' #draftTaskTable '). On ("Change", ": CheckBox", function () {
if ($ (this). is ("[Name= ' Cb-check-all ']")) {
Select All
$ (": CheckBox", $ (' #draftTaskTable ')). Prop ("Checked", $ (this). Prop ("checked"));
}else{
General Check
var checkbox = $ ("Tbody:checkbox", $ (' #draftTaskTable '));
$ (": checkbox[name= ' Cb-check-all ')", $ (' #draftTaskTable ')). Prop (' checked ', checkbox.length = = Checkbox.filter (': Checked '). length);
}
}). On ("click", ". Td-checkbox", function (event) {
Click on a cell to click the check box
!$ (Event.target). Is (": CheckBox") && $ (": CheckBox", this). Trigger ("click");
}). On ("click", "#btn-edit", function () {
Click the Edit button
var item = _datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.currentitem = Item;
Usermanage.edititeminit (item);
}). On ("click", "#btn-del", function () {
Click the Delete button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.deleteitem ([item]);
}). On ("click", "#moveUp", function () {
Click the Move Up button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.moveitem (item, "MoveUp");
}). On ("click", "#moveDown", function () {
Click the Move Down button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.moveitem (item, "MoveDown");
});
}
function Saveaddopinion () {
var opinionname = $ ("#opinion-add"). Val (). Trim ();
if (null = = Opinionname && opinionname.size () ==0) {
Alert ("The comment content cannot be empty!") ");
Return
}
$.ajax ({
url:framework_base_path+ "/myopinion/addopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionname": Opinionname
},
Success:function (JSON) {
if (json.result== true) {
$ ("#user-add"). Hide ();
$ ("#opinion-add"). Val ("");
var tablesetings=$ (' #draftTaskTable '). DataTable (). Fnsettings ();
var paging_length=tablesetings._idisplaylength;//how much is currently displayed per page
var page_start=tablesetings._irecordstotal;//current page start
var pagenum=div (page_start,paging_length);
$ ("#draftTaskTable"). DataTable (). Page (Pagenum). Draw (false);
/*$ ("#draftTaskTable"). DataTable (). page (0). Draw (); */
/* $ (' #draftTaskTable '). DataTable (). State.clear ();//Clear the original state
Inittable (); */
}
}
});
}
function Canceladdopinion () {
$ ("#user-add"). Hide ();
}
var usermanage = {
Currentitem:null,
Additeminit:function () {
$ ("#user-add"). Show (). Siblings (". Info-block"). Hide ();
},
Edititeminit:function (item) {
if (!item) {
Return
}
$ ("#user-view"). Show (). Siblings (". Info-block"). Hide ();
$ ("#opinion-edit"). Val (Item.opinionname);
},
Edititemsubmit:function () {
var opinionname = $ ("#opinion-edit"). Val ();
var opinionid = userManage.currentItem.id;
$.ajax ({
url:framework_base_path+ "/myopinion/updateopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionname": Opinionname,
"Opinionid": Opinionid
},
Success:function (JSON) {
$ ("#user-view"). Hide ();
if (json.result== true) {
Editfresh ();
}
}
});
},
Deleteitem:function (SelectedItems) {
VAR message;
var senddate= "";
var Sendurl;
if (selecteditems&&selecteditems.length) {
if (selecteditems.length = = 1) {
Message = "Are you sure you want to delete '" +selecteditems[0].opinionname+ "?";
Senddate = selecteditems[0].id;
Console.log (senddate);
Sendurl = framework_base_path+ "/myopinion/deleteopinion";
}else{
Message = "Are you sure you want to delete the selected" +selecteditems.length+ "entry record?";
for (Var i=0;i<selecteditems.length;i++) {
Senddate +=selecteditems[i].id + ","
}
Sendurl = framework_base_path+ "/myopinion/batchdeleteopinion";
$ ("#cb-check-all"). attr ("checked", false);
}
if (!confirm (message)) {
Return
}
$.ajax ({
Url:sendurl,
Type: "Post",
DataType: "JSON",
data:{
"Opinionid": senddate
},
Success:function (JSON) {
if (json.result== true) {
$ ("#user-view"). Hide ();
Editfresh ();
Return
}
}
});
}else{
Alert (' Please select the line to be manipulated first ');
}
},
Moveitem:function (Selecteditems,moveway) {
$.ajax ({
url:framework_base_path+ "/myopinion/moveopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionid": selecteditems.id,
"Opinionname": $ ("#fuzzy-search-content"). Val (),
"Moveway": Moveway
},
Success:function (JSON) {
var message = Json.message;
if (json.result== false) {
if (message== "is the top line!" | | message== "is the last line!") {
alert (message);
}
}
if (json.result== true) {
Editfresh ();
}
}
});
},
Searchiteminit:function () {
$ ("#draftTaskTable"). DataTable (). page (0). Draw (false);
}
};
function Editfresh () {
var tablesetings=$ (' #draftTaskTable '). DataTable (). Fnsettings ()
var paging_length=tablesetings._idisplaylength;//how much is currently displayed per page
var page_start=tablesetings._idisplaystart;//current page start
var pagenum=div (page_start,paging_length);
$ ("#draftTaskTable"). DataTable (). Page (Pagenum). Draw (false);
}
function Div (EXP1, EXP2) {//divisible
var n1 = Math.Round (EXP1); Rounded
var N2 = Math.Round (EXP2); Rounded
var rslt = n1/n2; Except
if (rslt >= 0) {
Rslt = Math.floor (RSLT); Returns the largest integer less than or equal to the original rslt.
}
else {
Rslt = Math.ceil (RSLT); Returns the smallest integer greater than or equal to the original rslt.
}
return rslt;
}
Basic operation of Datables