From: http://www.uedsc.com/mmgrid.html
http://blog.sina.com.cn/s/blog_a94593820102vzw2.html
mmGrid is a plug-in for jQuery to implement a style library for tables.Support includes sorting, Ajax, width locking, column hiding, locking, nowrap, multiple selection, selection, and paging. It also works with Bootstrap to make it look better and more gorgeous.
Introduction to mmGrid
This is a jQuery-based table part.It provides several basic functions for pages with limited area but more data to display.Its stylesheet is simple and easy to modify. You can quickly change it to fit into your page.
If you like something simpler and don't want to add too many dependent files to your project, you can try it.By the way, it also supports antiques like IE6.
Usage method
1. Download mmGrid
You can access the Github address of the mmGrid and get the source file of the mmGrid from the download button on the right
2. Introducing plug-in files
The mmGrid has two style files, the first being the primary display style and the second being the paging style. If your table does not require paging, you can avoid introducing the mmPaginator.css file.
<link rel="stylesheet" href="../src/mmGrid.css">
<link rel="stylesheet" href="../src/mmPaginator.css">MmGrid is based on jQquery plug-in, so before introducing mmGrid.js file, you must first import jQuery library. If you use JSON data format, you also need to import json2.js file, the same mmPaginator.js file is not a file that must be introduced.
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/json2.js"></script>
<script src="../src/mmGrid.js"></script>
<script src="../src/mmPaginator.js"></script>
//To this point mEven if the mGrid installation is complete, we'll show you how to use this plug-in
3. Configure Plugins
mmGrid supports two types of data loading: local object data and remote AJAX data.
Local Object Data
Local data objects can create a new JSON array directly, then pass in the data when mmGrid is called. See the data format Officer
$('#table2-1').mmGrid({
cols: cols,
items: items
});
The jQuery object IDble2-1 is a table for us that doesn't need to write any code. All the data is provided by our items object
Use client data as the data source.Parameter items, which can be of type object or array.If the data source is an object, use the root option to mark the array field within the object as the data source.
Remote Object Data
Remote object data requires url and method parameters to be configured. See the official sample for the data format
$('#table2-2').mmGrid({
cols: cols,
url: 'data/stockQuote.json',
method: 'get'
});
AJAX data is the data source.The parameter url is the request address and the return data is in json format, which can be an object or an array.If the returned data is an object, the root option is used to mark the array field within the object as the data source.
See: http://miemiedev.github.io/mmGrid/examples/index.html
mmGrid features
Supports sorting
Sort parameters are sortName and sortStatus.If the sort column is set at initialization, the sorted data is displayed directly.The sorting method is divided into client-side sorting and AJAX server-side sorting, with the remoteSort parameter set.Sorting has little to do with the data source, but setting remoteSort to true is not valid if the data source is local.If the sort field is a numeric type, you need to add the type:'number'attribute to the column option.When remotely sorting, the column model can set sortName to specify the name of the field remotely sorted, or the value in the name if not.
Support Column Status
Lock column width: Lock column width option is lockWidth:true.Column widths are not adjustable when they are locked, and when the table option fullWidthRows is set to true, the width of the column does not participate in the calculation.
Hide Column: The Hide Column option is hidden: true.When the cursor moves to the title, a down button appears to the far right of the title. Clicking this button opens the palette to adjust the hidden and displayed columns. When you are done, click the up button at the bottom right of the palette to close the palette.
Lock column display status: Lock column display status option is lockDisplay: true.After a locked column displays its state, the column options in the palette are grayed out, and the column cannot adjust its display state.
Content wrap
The table option nowrap sets whether to wrap when the cell content exceeds the cell length.
Adaptive Column Width
When the table option fullWidthRows is set to true, the table calculates the column width on the first data load, filling the entire table.Columns that lock column widths do not participate in calculations.This parameter will not work if the sum of all displayed column widths is greater than the table width.
Select Row
The table option multiSelect sets whether a table is multi-selectable and defaults to single-selection.Selected row objects can be obtained from the table operation $('#table'). mmGrid('selected').The cellSelected event triggers when the cursor clicks a cell, which can be set in the table options.
Box Column
The table option checkCol inserts a check box column in front of the table.The checkCol option can be used with multiSelect.
Index Column
The table option indexCol inserts an index column in front of the table.If the index number is too large for the cell, use indexColWidth to adjust the width.
Show all rows
When the table option height is set to'auto', the table displays all rows, not vertical scrollbars.
paging
The paging example here uses a paginator, which allows developers to choose to use other paginators based on their needs.
Header Grouping
Column models can nest a cols option to group headers, currently only two levels are supported.
Related Links
Project Address: http://miemiedev.github.io/mmGrid/examples/index.html
Github address: https://github.com/miemiedev/mmGrid
Sample Operation & Bootstrap Style
#set ($JQ="$")
<div id="toolbar">
<div class="search-area">
<form id="search1" class="form-inline" method="post">
<div class="form-group">
<label for="sender">Forum section:</label>
<select id="selectFid" class="form-control" width="100px">
<option value="all" selected>Please select a plate</option>
#foreach( $elem in $listF)
<option value="$elem.fid" >$elem.name</option>
#end
</select>
</div>
<div class="form-group">
<label class="sr-only" for="level">Keyword</label>
<input type="text" class="form-control" id="keyword" name="keyword" placeholder="Keyword">
</div>
<button class="btn btn-default" type="button" id="doact" onclick="doRefresh()"><span class="glyphicon glyphicon-search"></span> search</button>
</form>
</div>
</div>
<div id="maindata">
<div id="dbgrid"></div>
<div style="text-align:right;">
<div class='mmPaginator'>
<div class="totalCountLabel">common<span id="total">${total}</span>Bar records</div>
<ul class="pageList"><li class="prev disable">
<a onclick="prepage()">«</a></li>
<li class="active"><span id="pageindex">1</span></li>
<li class="next disable">
<a title="next page" onclick="nextpage()">»</a></li></ul>
<div class="limit">
<select id="pagecount">
<option value="50">50 per page</option><option value="100">100 per page</option>
<option value="200">200 per page</option><option value="500">500 per page</option>
</select></div>
</div>
</div>
</div>
<script type="text/javascript" src="/static/admin/js/pickadate/config.js"></script>
<script>
function getArgs(){
var args = {};
var fid = $("#selectFid").val()
if (fid != "all"){
args.fid = parseInt(fid)
}
var key = $("#keyword").val()
if (key != ""){
args.key = key
}
return args
}
function nextpage(){
var args = getArgs()
var pageindex = parseInt($("#pageindex").html());
var pagecount = $("#pagecount").val();
var index = pageindex
var total=parseInt($("#total").html());
if(total>(pagecount*pageindex)){
if (pageindex == 1){
index = pagecount
}else{
index = pageindex * pagecount
}
args.pageindex = index;
args.pagecount = pagecount;
args.cmd = "search";
$("#dbgrid").mmGrid().load(args);//Removing {plugins: [$('#pager'). mmPaginator ()]} does not affect the effect
//Note: This code only loads data args for mmGrid forms
$("#pageindex").html(pageindex + 1)
}
}
function prepage(){
var args = getArgs()
var pageindex = parseInt($("#pageindex").html());
var pagecount = $("#pagecount").val();
if (pageindex > 1){
var index = (pageindex - 2) * pagecount
args.pageindex = index;
args.pagecount = pagecount;
args.cmd = "search";
$("#dbgrid").mmGrid().load(args);
$("#pageindex").html(pageindex - 1)
}else{
showlay("This is the first page!");
}
}
function doRefresh() {
var args = getArgs()
args.pageindex = 0;
args.pagecount = $("#pagecount").val();
args.cmd = "search"
console.log(args)
$("#dbgrid").mmGrid().load(args);
setTotal();
$("#pageindex").html(1); //Set page number to 1 for each refresh
}
function setTotal(){
var args = getArgs()
${JQ}.post("/springmvc/threadviewlistcount/",args,function(data){
//alert(data)
if(data.result){
$("#total").html(data.message)
}
},"json");
}
var cols = [
{ title: 'Theme Code', name: 'tid',width:100},
{ title: 'Theme Name', name: 'subject',width:200,lockDisplay: true}, //lockDisplay: true locks the display status of the column and cannot be changed
{ title: 'author', name: 'author', width: 100}, //hidden: true column status can be changed
{ title: 'Number of Browses', name: 'views',width:50},
{ title: 'Number of replies', name: 'replies',width:50},
{ title: 'Point Ratio', name: 'recommendadd',width:50},
{ title: 'Posting Time', name: 'dateline',width:100},
{ title: 'operation',name:'',width:250,renderer: function(val, item, rowIndex) {
return '<button class="btn btn-primary">Comment on the situation</button> <button class="btn btn-danger">Delete this record</button> ';}},
];
/* $(function(){}) Equivalent to $(document).ready(function(){}) is used to execute a series of predefined functions after the DOM load is complete.*/
$(function () {
var args = {};
args.pageindex = 0;
args.pagecount = $("#pagecount").val();
args.cmd = "search";
$('#dbgrid').mmGrid({
height: $(window).height()-150,
fullWidthRows: false,//Adaptive Column Width
nowrap: true,//Can cell contents exceed column width be wrapped
cols: cols,
url: "/springmvc/threadviewlist",
root: "datas",
method: "post",
params: args,
indexCol:true, //Insert Index Column
indexColWidth:50,//Set the width of the index column
loadingText: "Please wait while loading......",//Show when loading data
noDataText: "No record", //Show when no records exist
loadErrorText: "Data loading error!", //Show when loading errors
}).on('cellSelected', function(e, item, rowIndex, colIndex){
if($(e.target).is('.btn-primary')){
e.stopPropagation();//Prevent Event Bubbles
tid=$("#dbgrid").mmGrid().row(rowIndex).tid
// alert(tid)
loadContentInfo('/threadrecommend?tid='+tid)
}
//leo_li
//In the discuz forum block, the ability to delete a record has been added
if($(e.target).is('.btn-danger') && confirm('Are you sure you want to delete this line record?')){
e.stopPropagation(); //Prevent Event Bubbles
item.cmd="del";
item.fid=$("#dbgrid").mmGrid().row(rowIndex).tid
// alert(item.fid);
item.pageindex = 0 //unused param, required
item.pagecount = 0 //unused param, required
${JQ}.post("/springmvc/threadviewlist",item,function(data){
if (data.result){
//alert("deleted successfully");
$("#dbgrid").mmGrid().removeRow(rowIndex);
setTotal();
}else{
alert("Delete failed");
}
},'json');
}
});
setTotal();
});
</script>
<div class="modal fade" data-keyboard="false" data-backdrop="static" id="loading">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div id="preloader">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div class="spinner-text">Data loading</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>