JQuery Easy Ui dataGrid 數據表格

原創 sui_xing 2020-02-26 00:44

數據表格 - DataGrid


數據表格顯示的數據以表格的形式，並提供了豐富的選擇，排序，分組和編輯數據的支持。這個數據表格被設計以縮短開發時間，並要求開發商沒有具體的知識。它是輕量級的，功能豐富的。單元格合併，多列標題，凍結列和頁腳是其功能只是一小部分。繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults重載默認值。.

依賴組件（Dependencies）

使用方法（Usage Example）

從現有的表單元素創建數據表格，定義在html中的行，列和數據。

  1. <table class="easyui-datagrid">  
  2.     <thead>  
  3.         <tr>  
  4.             <th data-options="field:'code'">Code</th>  
  5.             <th data-options="field:'name'">Name</th>  
  6.             <th data-options="field:'price'">Price</th>  
  7.         </tr>  
  8.     </thead>  
  9.     <tbody>  
  10.         <tr>  
  11.             <td>001</td><td>name1</td><td>2323</td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td>002</td><td>name2</td><td>4612</td>  
  15.         </tr>  
  16.     </tbody>  
  17. </table>  

通過<TABLE>標記創建的DataGrid。嵌套的<TH>標籤定義的列的表。

  1. <table class="easyui-datagrid" style="width:400px;height:250px"  
  2.         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
  3.     <thead>  
  4.         <tr>  
  5.             <th data-options="field:'code',width:100">Code</th>  
  6.             <th data-options="field:'name',width:100">Name</th>  
  7.             <th data-options="field:'price',width:100,align:'right'">Price</th>  
  8.         </tr>  
  9.     </thead>  
  10. </table>  

使用JavaScript創建數據表格。

  1. <table id="dg"></table>  

  1. $('#dg').datagrid({   
  2.     url:'datagrid_data.json',   
  3.     columns:[[   
  4.         {field:'code',title:'Code',width:100},   
  5.         {field:'name',title:'Name',width:100},   
  6.         {field:'price',title:'Price',width:100,align:'right'}   
  7.     ]]   
  8. });  

查詢數據填充數據表格。

  1. $('#dg').datagrid('load', {   
  2.     name: 'easyui',   
  3.     address: 'ho'  
  4. });  

數據更改與服務器交互，刷新當前數據。

  1. $('#dg').datagrid('reload');    // reload the current page data  

數據表格屬性（DataGrid Properties）

屬性繼承控制面板，以下是數據表格獨有的屬性。

名稱 類型 描述 默認值
columns array 數據表格列配置對象，查看列屬性以獲取更多細節。 undefined
frozenColumns array 跟列屬性一樣，但是這些列固定在左邊，不會滾動。 undefined
fitColumns boolean 設置爲true將自動使列適應表格寬度以防止出現水平滾動。 false
autoRowHeight boolean 定義設置行的高度，根據該行的內容。設置爲false可以提高負載性能。 true
toolbar array,selector 數據表格頂部面板的工具欄。可能的值：
1）數組，每個工具選項和鏈接按鈕相同。
2）選擇顯示的工具欄。
在一個<div>的標籤定義工具欄: 
$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通過數組定義工具欄:

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});
null
striped boolean 設置爲true將交替顯示行背景。 false
method string 請求遠程數據的方法類型。 post
nowrap boolean 設置爲true，當數據長度超出列寬時將會自動截取。 true
idField string 表明該列是一個唯一列。 null
url string 一個用以從遠程站點請求數據的超鏈接地址。 null
loadMsg string 當從遠程站點載入數據時，顯示的一條快捷信息。 Processing, please wait …
pagination boolean 設置true將在數據表格底部顯示分頁工具欄。 false
rownumbers boolean 設置爲true將顯示行數。 false
singleSelect boolean 設置爲true將只允許選擇一行。 false
checkOnSelect boolean 如果爲true，該複選框被選中/取消選中，當用戶點擊某一行上。如果爲false，該複選框僅檢查/取消選中，當用戶點擊完全的複選框。
此屬性是1.3版本。		 true
selectOnCheck boolean 如果設置爲true，單擊一個複選框，將始終選擇行。如果爲false，不會選擇行選中該複選框。
此屬性是1.3版本。		 true
pagePosition string  定義的分頁欄的位置。可用的值有 'top','bottom','both'。
此屬性是可自1.3版本。		 bottom
pageNumber number 當設置分頁屬性時，初始化分頁碼。 1
pageSize number 當設置分頁屬性時，初始化每頁記錄數。 10
pageList array 當設置分頁屬性時，初始化每頁記錄數列表。 [10,20,30,40,50]
queryParams object 當請求遠程數據時，發送的額外參數。

示例:

$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});
{}
sortName string 當數據表格初始化時以哪一列來排序。 null
sortOrder string 定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。 asc
remoteSort boolean 定義是否通過遠程服務器對數據排序。 true
showFooter boolean 定義是否顯示行底（如果是做統計表格，這裏可以顯示總計等）。 false
rowStyler function 返回樣式，如：'background:red'，function有2個參數：
index：行索引，從0開始.
row：對應於該行記錄的對象。

示例:

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});
 
loader function 定義如何從遠程服務器加載數據。返回false可以取消該操作。這個函數接受以下參數：
param: 參數對象傳遞到遠程服務器。
success(data): 回調函數將被調用成功檢索的數據。
error():回調函數將被調用失敗時檢索數據。		 json loader
loadFilter function 返回過濾的數據顯示。該函數需要一個參數'data'，表示原始數據。您可以更改源數據的標準數據格式。此函數必須返回標準數據對象中包含的“total”和“rows”的屬性。

示例:

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
 
editors object 定義當編輯一行時的編輯模式。 predefined editors
view object 定義數據表格的視圖。 default view

 

列屬性（Column Properties）

數據表格的列是一個對象數組，即這個對象中的元素也是一個數組（js中數組是對象）。 對象數組中的每一個元素都是可配置的對象，每個可配置對象定義一個列。

 

示例:

  1. columns:[[   
  2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
  3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
  4.     {title:'Item Details',colspan:4}   
  5. ],[   
  6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
  7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
  8.     {field:'attr1',title:'Attribute',width:100},   
  9.     {field:'status',title:'Status',width:60}   
  10. ]]  

名稱 類型 描述 默認值
title string 列標題。 undefined
field string 列字段。 undefined
width number 列寬。 undefined
rowspan number 表明一個單元格跨幾行。 undefined
colspan number 表明一個單元格跨幾列。 undefined
align string 表明如何對其列數據，可選值：'left'，'right'，'center'。 undefined
sortable boolean 設置爲true允許對該列排序。 undefined
resizable boolean 設置爲true允許該列被縮放。 undefined
hidden boolean 設置爲true將隱藏列。 undefined
checkbox boolean 設置爲true將顯示覆選框。 undefined
formatter function 格式化單元格函數，有3個參數：
value：字段的值。
rowData：行數據。
rowIndex：行索引。

示例:

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
undefined
styler function 單元格樣式函數，返回樣式字符串裝飾表格如'background:red'，function有3個參數：
value：字段值。
rowData：行數據。
rowIndex：行索引。

示例:

$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});
undefined
sorter function T自定義字段排序函數，有2個參數：
a：該列的第一個值。
b：該列的第二個值。

示例:

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
			sorter:function(a,b){  
				a = a.split('/');  
				b = b.split('/');  
				if (a[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});
undefined
editor string,object 表明編輯類型。如果屬性是字符串類型表示編輯類型，如果是對象則包含2個參數：
type：字符串，編輯類型，可選值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。
options：對象，對象於編輯類型的編輯器屬性。		 undefined

 

編輯器（Editor）

使用$.fn.datagrid.defaults.editors重載默認值。

 

每個編輯器都有以下方法:

名稱 屬性 描述
init container, options 初始化編輯器並返回目標對象。
destroy target 註銷編輯器。
getValue target 獲取編輯框的值。
setValue target , value 設置編輯框的值。
resize target , width 調整編輯器

如下代碼將定義一個文本編輯器:

  1. $.extend($.fn.datagrid.defaults.editors, {   
  2.     text: {   
  3.         init: function(container, options){   
  4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   
  5.             return input;   
  6.         },   
  7.         getValue: function(target){   
  8.             return $(target).val();   
  9.         },   
  10.         setValue: function(target, value){   
  11.             $(target).val(value);   
  12.         },   
  13.         resize: function(target, width){   
  14.             var input = $(target);   
  15.             if ($.boxModel == true){   
  16.                 input.width(width - (input.outerWidth() - input.width()));   
  17.             } else {   
  18.                 input.width(width);   
  19.             }   
  20.         }   
  21.     }   
  22. });  

數據表格視圖（DataGrid View）

使用$.fn.datagrid.defaults.view重載默認值。

視圖是一個告訴數據表格如何呈現行記錄的對象，對象必須定義以下方法:

名稱 屬性 描述
render target, container, frozen 當數據載入時調用。
target: DOM對象，數據網格對象。
container: 行記錄容器。
frozen: 是否呈現固定容器。
renderFooter target, container, frozen 這是一個可選函數用以展現行底。
renderRow target, fields, frozen, rowIndex, rowData 這是一個可選函數，它可以被render函數調用。
refreshRow target, rowIndex 定義如何刷新指定的行。
onBeforeRender target, rows 在視圖被呈現之前觸發。
onAfterRender target 在視圖被程序之後觸發。

 

事件（Events）

事件繼承控制面板，以下是數據表格獨有的屬性。

名稱 屬性 描述
onLoadSuccess data 當數據載入成功時觸發。
onLoadError none 當載入遠程數據發生錯誤時觸發。
onBeforeLoad param 在請求載入數據之前觸發，如果返回false將取消載入。
onClickRow rowIndex, rowData 當用戶點擊行時觸發，參數如下：
rowIndex：被點擊的行索引，從0開始。
rowData：對應於被點擊的行的記錄。
onDblClickRow rowIndex, rowData 當用戶雙擊一行時觸發，參數如下：
rowIndex：被點擊的行索引，從0開始。
rowData：對應於被點擊的行的記錄。
onClickCell rowIndex, field, value 當用戶點擊單元格時觸發。
onDblClickCell rowIndex, field, value 當用戶雙擊單元格時觸發。

示例:

// when double click a cell, begin editing and make the editor get focus
$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});
onSortColumn sort, order 當用戶對列排序時觸發，參數如下：
sort：排序字段名稱。
order：排序順序。
onResizeColumn field, width 當用戶調整列寬時觸發。
onSelect rowIndex, rowData 當用戶選擇一行是觸發，參數如下：
rowIndex：被選擇的行索引，從0開始。
rowData：對應於被選擇行的記錄。
onUnselect rowIndex, rowData 當用戶取消選擇一行時觸發，參數如下：
rowIndex：被取消選擇的行索引，從0開始。
rowData：對應於被取消選擇行的記錄。
onSelectAll rows 當用戶選擇所有行時觸發。
onUnselectAll rows 當用戶取消選擇所有行時觸發。
onCheck rowIndex,rowData 當用戶選中行時觸發，參數包含：
rowIndex：選中行的索引，從0開始
rowData：選中的行對應的記錄
此屬性是1.3版本。
onUncheck rowIndex,rowData 當用戶取消選中行時觸發，參數包含：
rowIndex：取消選中行的索引，從0開始
rowData：未經檢查的行對應的記錄
此屬性是1.3版本。
onCheckAll rows 當用戶檢查所有行時觸發。此屬性是1.3版本。
onUncheckAll rows 用戶取消所有行時觸發。此屬性是1.3版本。
onBeforeEdit rowIndex, rowData 當用戶開始編輯一行時觸發，參數如下：
rowIndex：正在編輯的行索引，從0開始。
rowData：對應於正在編輯的行的記錄。
onAfterEdit rowIndex, rowData, changes 當用戶編輯完成時觸發，參數如下：
rowIndex：正在編輯的行索引，從0開始。
rowData：對應於正在編輯的行的記錄。
changes：被改變的字段內容，對應方式爲字段：值。
onCancelEdit rowIndex, rowData 當用戶取消編輯行時觸發，參數如下：
rowIndex：正在編輯的行索引，從0開始。
rowData：對應於正在編輯的行的記錄。
onHeaderContextMenu e, field 當數據表格的列標題被鼠標右鍵單擊時觸發。
onRowContextMenu e, rowIndex, rowData 當一行被鼠標右鍵單擊時觸發。

 

方法（Methods）

 

名稱 屬性 描述
options none 返回屬性對象。
getPager none 返回頁面對象。
getPanel none 返回控制面板對象。
getColumnFields frozen 返回列字段，如果設置了frozen屬性爲true，將返回固定列的字段名。
示例:
var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption field 返回特定的列屬性。
resize param 縮放和佈局。
load param 載入並顯示第一頁的記錄，如果傳遞了'param'參數，它將會覆蓋查詢參數屬性的值。通過傳遞一些參數，通常做一個查詢，這個方法可以被稱爲從服務器加載新數據。 
$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});
reload param 重載記錄，跟'load'方法一樣但是重載的是當前頁的記錄而非第一頁。
reloadFooter footer 重載行底記錄。 示例: 
// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$('#dg').datagrid('reloadFooter',[
	{name: 'name1', salary: 60000},
	{name: 'name2', salary: 65000}
]);
loading none 顯示載入狀態。
loaded none 隱藏載入狀態。
fitColumns none 讓列寬自動適應數據表格的寬度。
fixColumnSize field 固定列尺寸。如果“field' 參數未指定，將所有列的大小固定。

示例:

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size
fixRowHeight index 固定特定列的高度。如果“index' 參數未指定，將所有列的高度固定。
autoSizeColumn field 自動調整列寬，以適應內容。此方法是1.3版本特有的。
loadData data 載入本地數據，舊記錄將被移除。
getData none 返回已載入數據。
getRows none 返回當前頁的記錄。
getFooterRows none 返回行底記錄。
getRowIndex row 返回指定行的索引，row參數可以是行記錄或者是一個id字段的值。
getChecked none 返回所有行的複選框已被選中。此方法是1.3版本特有的。
getSelected none 返回第一個被選擇的行記錄或null。
getSelections none 返回所有被選擇的行，當沒有記錄被選擇時，將返回一個空數組。
clearSelections none 取消所有的已選擇項。
selectAll none 選擇所有頁面的行。
unselectAll none 取消選擇所有頁面的行。
selectRow index 選擇一行，行索引從0開始。
selectRecord idValue 通過傳遞id參數來選擇一行。
unselectRow index 取消選擇一行。
checkAll none 檢查所有頁面的行。此方法是1.3版本特有的。
uncheckAll none 取消檢查所有當前頁面的行。此方法是1.3版本特有的。
checkRow index 檢查行，行索引從0開始。此方法是1.3版本特有的。
uncheckRow index 取消檢查行，行索引從0開始。此方法是1.3版本特有的。
beginEdit index 開始編輯一行。
endEdit index 結束編輯。
cancelEdit index 取消編輯。
getEditors index 獲取指定行的編輯器，每個編輯器有如下屬性：
actions：編輯器可以做的行爲。
target：目標編輯器jQuery對象。
field：字段名。
type：編輯器類型。
getEditor options 獲取特定的編輯器，options參數有2個屬性：
index：行索引。
field:字段名。

示例:

// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
refreshRow index 刷新一行。
validateRow index 校驗指定的行，如果有效返回true。
updateRow param 更新指定的行，param參數包含如下屬性：
index：要更新的行索引。
row：新的行數據。

示例:

$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: 'new name',
		note: 'new note message'
	}
});
appendRow row 添加一行。 新的行會被添加到最後一個位置: 
$('#dg').datagrid('appendRow',{
	name: 'new name',
	age: 30,
	note: 'some messages'
});
insertRow param
插入一個新行，param參數包含如下屬性：
index：要插入的行索引，如果沒有定義則在最後面添加一個新行。
row：行數據。
示例:
// insert a new row at second row position
$('#dg').datagrid('insertRow',{
	index: 1,	// index start with 0
	row: {
		name: 'new name',
		age: 30,
		note: 'some messages'
	}
});
deleteRow index 刪除一行。
getChanges type 獲取從最後一次提交開始的被修改的所有行，type參數表明修改的類型，可選值：inserted，deleted，updated等 。當沒有傳遞type參數時，返回所有被修改的行。
acceptChanges none 提交所有修改的數據，提交後的數據將不能再修改或者回滾。
rejectChanges none 回滾自創建以來或自上次調用AcceptChanges，所有的變化數據。
mergeCells options 合併單元格，options參數包含如下屬性：
index：行索引。
field：字段名。
rowspan：整合單元格要跨的行數。
colspan：整合單元格要跨的列數。
showColumn field 顯示特定的列。
hideColumn field 隱藏特定的列。
複製代碼
  1     /////////////////////////////////////////////
  2         //初始化數據
  3     function initGrid()
  4         {  
  5             $('#grid').datagrid({
  6                 width:'100%',    
  7                 height:'auto',
  8                 nowrap: true,
  9                 striped: true,
 10                 fitColumns:false,
 11                 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',
 12                 queryParams:queryParam,
 13                 remoteSort:false,
 14                 //Grid對應的主鍵列
 15                 idField:'',
 16                 singleSelect:true,
 17                 columns:[[
 18                         {field:'serial',title:'',width:15,checkbox:true},
 19                         {field:'activeName',title:'活動名稱',width:50,sortable:true},
 20                         {field:'giftGoodId',title:'贈品商品編碼',width:80},
 21                         {field:'goodsName',title:'商品名稱',width:120},
 22                         {field:'giftCodeTotal',title:'贈品碼生成數量',width:100},
 23                         {field:'genCodeNumber',title:'已生成贈品碼數量',width:100},
 24                         {field:'startTime',title:'贈品發放起始時間',width:125},
 25                         {field:'endTime',title:'贈品發放結束時間',width:125},
 26                         {field:'memo',title:'備註',width:120}
 27                 ]],
 28                 pagination:true,
 29                 rownumbers:true,
 30                 toolbar:[
 31                 '-',{
 32                     id:'btnClearSelections',
 33                     text:'修改活動商品',
 34                     iconCls:'icon-edit',
 35                     handler:function(){
 36                         editData();
 37                     }
 38                 },'-',{
 39                     id:'btnDel',
 40                     text:'刪除活動商品',
 41                     iconCls:'icon-no',
 42                     handler:function(){
 43                         deleteData();
 44                     }
 45                 },
 46                 '-',{
 47                     id:'btnClearSelections',
 48                     text:'清除選擇',
 49                     iconCls:'icon-cut',
 50                     handler:function(){
 51                         $('#grid').datagrid('clearSelections');
 52                         //設置選中值
 53                         document.addForm.reset();
 54                         $('#giftCodeTotal').val("0");
 55                         $('#memoData').html("");
 56                         $('#submitBtn').html("確認提交");
 57                         $('#submitBtn').attr('onclick',"addSubmit('insert');");
 58                     }
 59                 }],
 60                 onLoadError:function(){
 61                     XW_dialog.alert('','加載數據失敗！');
 62                 }
 63                 
 64             });
 65             
 66             //設置分頁控件  
 67             var p = $('#grid').datagrid('getPager');  
 68             $(p).pagination(PAGE_TEMPLATE);
 69         }
 70         
 71         
 72         function editData(){
 73             var row = $('#grid').datagrid("getSelections");
 74             if($(row).length < 1 || $(row).length > 1)
 75             {
 76                 XW_dialog.alert('',"請選擇要查看的記錄，只能選取單行！");
 77                 return ;
 78             }
 79             //設置默認選中
 80             $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);
 81             $('#goodsSelect').hide();
 82             //設置選中值
 83             $('#giftCodeTotal').val(row[0].giftCodeTotal);
 84             $('#memoData').html(row[0].memo);
 85             $('#submitBtn').html("更新");
 86             $('#submitBtn').attr('onclick',"addSubmit('update');");
 87             $('#resetBtn').hide();
 88             
 89         }
 90         
 91         
 92         function deleteData(){
 93         var data = $('#grid').datagrid("getSelections");
 94         //刪除 
 95         var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId;
 96         //發送刪除請求
 97         $.ajax({
 98            type: "POST",
 99            dataType:'json',
100            url: delurl,
101            success: function(msg){
102              if(msg.success)
103                 {
104                     //保存回調函數使用的數據
105                     XW_dialog.addData('callbackData',msg.map);
106                     //刪除成功
107                     XW_dialog.tips(msg.errorMsg, 3);
108                     deleteCallBack();
109                 }
110                 else
111                 {
112                     XW_dialog.alert('',msg.errorMsg);
113                 }
114            }
115     });
116 }    
117         
118         
119         //刪除記錄回調函數，默認調用刷新記錄方法，
120         function deleteCallBack(){
121             reloadGrid("grid");
122         }
123
複製代碼


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

解決ERROR 1044 (42000): Access denied for user

ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql' 剛在服務器上裝上mysql，發現以root加密碼的方式總是登錄不了，而直接輸入

sui_xing 2020-06-24 10:08:06

ASP.NET實現微信功能（1）（創建菜單，驗證，給菜單添加事件）

sui_xing 2020-02-26 00:44:24

jquery easyui datagrid分頁顯示數據

sui_xing 2020-02-26 00:44:24

JavaScript中清空數組的三種方式

sui_xing 2020-02-26 00:44:24

response.setHeader()下載中文文件名亂碼問題

sui_xing 2020-02-26 00:44:24

jquery操作json數組的實現代碼及常用函數

sui_xing 2020-02-26 00:44:24

最簡單實現跨域的方法：使用nginx反向代理

sui_xing 2020-02-26 00:44:24

bootstrap table detailView 詳細視圖默認展開|選擇展開

    最近用到了bootstrap table 詳細視圖，展示字數比較多的字段，經過在網上查找，使用detailView實現，只需要做以下配置。 detailView:true, detailFormatter:function(in

the_will_of_god 2020-06-30 09:52:42

當鼠標懸點時，突出當前行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

fighting_12 2020-06-29 16:38:39

解決ERROR 1044 (42000): Access denied for user

ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql' 剛在服務器上裝上mysql，發現以root加密碼的方式總是登錄不了，而直接輸入

sui_xing 2020-06-24 10:08:06

ExtJs頁面佈局總結

ExtJs頁面佈局總結 面板相當於一張乾淨的白紙，如果直接在上面添加內容，將很難控制面板中內容的顯示位置，面板元素越多就越顯得凌亂，所以需要在面板上劃分不同的區域，將面板內容展示到希望的位置上。ExtJS通過提供多種佈局類來

TheoGo 2020-06-21 21:04:36

使div居中顯示

1、上下爲0左右自動，寬度請忽略！ .wrap { width:460px;margin:0 auto;} 2、相對父級body，左邊與中部對其，在將自身左移自身寬度的一半，好了，居中。 .wrap { position:relative

DHASA 2020-06-21 15:55:41

css一些零零散散的問題

1、css的最後的樣式會覆蓋之前相同的樣式，同文件是這樣，不同css文件中也是這樣（當前覆蓋父級）。 2、之前遇到一個文字過長省略的問題，今天也遇到了，發現是未加寬度的問題。 css樣式如下： .fileimg_txt { width

DHASA 2020-06-21 15:55:40

圖片和文字保持相對位置不變以及background屬性

這個代碼大神分分鐘寫完。先來看效果圖： 下面是代碼： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>aa</title> <style typ

DHASA 2020-06-21 15:10:39

eclipse Freemarker插件

原文地址：http://my249645546.iteye.com/blog/1856141 關於Freemarker，功能很強大，但好用的eclipse插件卻非常少。曾經用Jboss的那個插件，居然對Freemarker的部分標籤不

公众号【架构师也是人】 2020-06-16 14:01:03