天天射天天干天天色,欧美国产日韩羞羞羞在线看免费观看,gogo专业大尺度大胆高清摄影

欄目導航

公司新聞

新聞資訊

新聞資訊

asyLoader 組件

一，基本EasyLoader 組件

要引入<script type="text/javascript" src="../jquery-easyui-1.3.3/easyloader.js"></script>

<h2>基本EasyLoader組件</h2>

點擊下面按鈕動態(tài)加載組件.<br/>

<a href="javascript：void(0)" class="easyui-linkbutton" onclick="load2()" >加載對話框</a>

</div>

function load1(){

using('calendar', function(){

$('#cc').calendar({

width:180,

height:180

});

}

function load2(){

using(['dialog','messager'], function(){

$('#dd').dialog({

title:'對話框',

width:300,

height:200

});

$.messager.show({

title:'系統(tǒng)提示',

msg:'對話框被創(chuàng)建'

});

}

function load3(){

using('datagrid', function(){

$('#tt').datagrid({

title:'數(shù)據(jù)表格',

width:300,

height:200,

fitColumns:true,

columns:[[

{field:'productid',title:'產品編號',width:100},

{field:'productname',title:'產品名稱',width:200}

]],

data: [

{"productid":"FI-SW-01","productname":"Koi"},

{"productid":"K9-DL-01","productname":"Dalmation"},

{"productid":"RP-SN-01","productname":"Rattlesnake"},

{"productid":"RP-LI-02","productname":"Iguana"},

{"productid":"FL-DSH-01","productname":"Manx"},

{"productid":"FL-DLH-02","productname":"Persian"},

{"productid":"AV-CB-01","productname":"Amazon Parrot"}

]

});

}

</script>

Draggable 組件

一，基本拖拽組件

</div>

<!— 只能托轉標題 -->

</div>

二，拖拽限制

</div>

function onDrag(e){

var d=e.data;

if (d.left < 0){d.left=0}

if (d.top < 0){d.top=0}

if (d.left + $(d.target).outerWidth() > $(d.parent).width()){

d.left=$(d.parent).width() - $(d.target).outerWidth();

}

if (d.top + $(d.target).outerHeight() > $(d.parent).height()){

d.top=$(d.parent).height() - $(d.target).outerHeight();

}

</script>

</div>

三，對齊拖拽

</div>

function onDrag(e){

var d=e.data;

d.left=repair(d.left);

d.top=repair(d.top);

//對齊調整

function repair(v){

var r=parseInt(v/20) * 20;//計算成20的整數(shù)倍

if(Math.abs(v % 20) > 10){ //計算是更接近左邊還是右面

r +=v > 0 ? 20 : -20;

}

return r;

}

</script>

</div>

四，購物車

.products {

overflow: auto;

height: 100%;

background: #fafafa;

}

.products ul {

list-style: none;

margin: 0;

padding: 0px;

}

.products li {

display: inline;

float: left;

margin: 10px;

}

.item {

display: block;

text-decoration: none;

}

.item img {

border: 1px solid #333;

}

.item p {

margin: 0;

font-weight: bold;

text-align: center;

color: #c3c3c3;

}

.cart {

float: right;

position: relative;

width: 260px;

height: 100%;

background: #ccc;

padding: 0px 10px;

}

.ctitle {

text-align: center;

color: #555;

font-size: 18px;

padding: 10px;

}

</style>

</head>

<body>

<h2>基本Easydraggable組件-購物車</h2>

<div class="easyui-panel" fit="true" border="false"

style="height: 100%; overflow: hidden">

<table id="cartcontent" fitColumns="true"

style="width1: 300px; height: auto;">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<div class="ctitle" style="position: absolute; bottom: 80px">把商品拖到這里添加到購物車</div>

</div>

<ul>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

</ul>

</div>

$(function(){

$('#cartcontent').datagrid({

singleSelect:true,

showFooter:true

});

$('.item').draggable({

revert:true,

proxy:'clone',

onStartDrag:function(){

$(this).draggable('options').cursor='not-allowed';

$(this).draggable('proxy').css('z-index',10);

onStopDrag:function(){

$(this).draggable('options').cursor='move';

}

});

$('.cart').droppable({

onDragEnter:function(e,source){

$(source).draggable('options').cursor='auto';

onDragLeave:function(e,source){

$(source).draggable('options').cursor='not-allowed';

onDrop:function(e,source){

var name=$(source).find('p:eq(0)').html();

var price=$(source).find('p:eq(1)').html();

addProduct(name, parseFloat(price.split('RMB')[1]));

}

});

function addProduct(name,price){

var dg=$('#cartcontent');

var data=dg.datagrid('getData');

function add(){

for(var i=0; i<data.total; i++){

var row=data.rows[i];

if (row.name==name){

row.quantity +=1;

return;

}

data.total +=1;

data.rows.push({

name:name,

quantity:1,

price:price

});

}

add();

dg.datagrid('loadData', data);

var cost=0;

var rows=dg.datagrid('getRows');

for(var i=0; i<rows.length; i++){

cost +=rows[i].price*rows[i].quantity;

}

dg.datagrid('reloadFooter', [{name:'總計',price:cost}]);

}

</script>

</body>

五，學校課程表

.left {

width: 120px;

float: left;

}

.left table {

background: #E0ECFF;

}

.left td {

background: #eee;

}

.right {

float: right;

width: 570px;

}

.right table {

background: #E0ECFF;

width: 100%;

}

.right td {

background: #fafafa;

color: #444;

text-align: center;

padding: 2px;

}

.right td {

background: #E0ECFF;

}

.right td.drop {

background: #fafafa;

width: 100px;

}

.right td.over {

background: #FBEC88;

}

.item {

text-align: center;

border: 1px solid #499B33;

background: #fafafa;

color: #444;

width: 100px;

}

.assigned {

border: 1px solid #BC2A4D;

}

</style>

</head>

<body>

<h2>創(chuàng)建一個學校課程表</h2>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

$(function(){

$(".left .item").draggable({

revert:true,

proxy: 'clone'

});

$('.right td.drop').droppable({

onDragEnter:function(){

$(this).addClass('over');

onDragLeave:function(){

$(this).removeClass('over');

onDrop:function(e,source){

$(this).removeClass('over');

if ($(source).hasClass('assigned')){

$(this).append(source);

} else {

var c=$(source).clone().addClass('assigned');

$(this).empty().append(c);

c.draggable({

revert:true

});

}

});

</script>

</body>

Droppable 組件

一，基本可拽入容器

<body>

<h2>基本Easydroppable組件</h2>

<div>把左邊項拖拽到右邊目標區(qū)域.</div>

</div>

<div>

</div>

<div class="easyui-droppable targetarea"

data-options="

accept: '.dragitem',

onDragEnter:function(e,source){

$(this).html('進入');

onDragLeave: function(e,source){

$(this).html('離開');

onDrop: function(e,source){

$(this).html($(source).html() + ' 拽入');

}

</div>

<styletype="text/css">

.title{

margin-bottom:10px;

}

.dragitem{

border:1px solid #ccc;

width:50px;

height:50px;

margin-bottom:10px;

}

.targetarea{

border:1px solid red;

height:150px;

}

.proxy{

border:1px solid #ccc;

width:80px;

background:#fafafa;

}

</style>

$(function(){

$('.dragitem').draggable({

revert:true,

deltaX:10,

deltaY:10,

proxy:function(source){

var n=$('<div></div>');

n.html($(source).html()).appendTo('body');

return n;

}

});

</script>

</body>

二，改變拖放物順序

<h2>改變托動物順序</h2>

<div>拖動托動物改變順序.</div>

</div>

</ul>

<styletype="text/css">

.drag-item {

list-style-type: none;

display: block;

padding: 5px;

border: 1px solid #ccc;

margin: 2px;

width: 300px;

background: #fafafa;

color: #444;

}

.indicator {

position: absolute;

font-size: 9px;

width: 10px;

height: 10px;

display: none;

color: red;

}

</style>

$(function() {

var indicator=$('<div>>></div>').appendTo(

'body');

$('.drag-item').draggable({

revert : true,

deltaX : 0,

deltaY : 0

}).droppable({

onDragOver : function(e, source) {

indicator.css({

display : 'block',

left : $(this).offset().left - 10,

top : $(this).offset().top + $(this).outerHeight() - 5

});

onDragLeave : function(e, source) {

indicator.hide();

onDrop : function(e, source) {

$(source).insertAfter(this);

indicator.hide();

}

});

</script>

三，接受一個拖拽物

<h2>接受一個拖拽物</h2>

<div>不接受一些拖拽物.</div>

</div>

<div id="source"

style="border: 1px solid #ccc; width: 300px; height: 400px; float: left; margin: 5px;">

來拖我!

</div>

<div id="target"

style="border: 1px solid #ccc; width: 300px; height: 400px; float: left; margin: 5px;">

拖到這里！</div>

<styletype="text/css">

.drag {

width: 100px;

height: 50px;

padding: 10px;

margin: 5px;

border: 1px solid #ccc;

background: #AACCFF;

}

.dp {

opacity: 0.5;

filter: alpha(opacity=50);

}

.over {

background: #FBEC88;

}

</style>

$(function() {

$('.drag').draggable({

proxy : 'clone',

revert : true,

cursor : 'auto',

onStartDrag : function() {

$(this).draggable('options').cursor='not-allowed';

$(this).draggable('proxy').addClass('dp');

onStopDrag : function() {

$(this).draggable('options').cursor='auto';

}

});

$('#target')

.droppable(

{

accept : '#d1,#d3',

onDragEnter : function(e, source) {

$(source).draggable('options').cursor='auto';

$(source).draggable('proxy').css('border',

'1px solid red');

$(this).addClass('over');

onDragLeave : function(e, source) {

$(source).draggable('options').cursor='not-allowed';

$(source).draggable('proxy').css('border',

'1px solid #ccc');

$(this).removeClass('over');

onDrop : function(e, source) {

$(this).append(source)

$(this).removeClass('over');

}

});

</script>

Resizable 組件

一，基本可縮放組件

</div>

<div style="padding:20px">拖拽并縮放我</div>

</div>

Pagination 組件

一，基本分頁組件

</div>

二，定制分頁組件按鈕

</div>

var buttons=[{

iconCls:'icon-add',

handler:function(){

alert('添加');

}

},{

iconCls:'icon-cut',

handler:function(){

alert('剪切');

}

},{

iconCls:'icon-save',

handler:function(){

alert('保存');

}

}];

</script>

三，簡化分頁組件

<div class="easyui-pagination" data-options="

total: 114,

showPageList: false,

showRefresh: false,

displayMsg: ''

" style="border:1px solid #ddd"></div>

</div>

SearchBox 組件

一，基本搜索框組件

</div>

function doSearch(value){

alert('您輸入的是: ' + value);

}

</script>

二，分類搜索

<div data-options="name:'sports'">Sports News</div>

</div>

function doSearch(value,name){

alert('You input: ' + value+'('+name+')');

}

</script>

Progressbar 組件

一，基本進度條組件

<h2>進度條組件</h2>

</div>

function start(){

var value=$("#p").progressbar('getValue');

if(value < 100){

value +=Math.floor(Math.random() * 10);

$("#p").progressbar('setValue', value);

//setTimeout(arguments.callee, 200);

setTimeout(start, 200);

}

</script>

ToolTip 組件

一，基本提示信息組件

<h2>基本提示信息組件</h2>

<p>

能夠用每個元素的標題屬性作為提示信息.

顯示提示信息.

</p>

</div>

二，提示信息位置

<h2>基本提示信息的位置</h2>

</select>

<br/>

</div>

function changerPosition(pos){

alert(pos);

$("#pp").tooltip({

position:pos

});

}

</script>

三，定制提示信息內容(分頁提示)

$(function(){

$('#pg').pagination().find('a.l-btn').tooltip({

content : function(){

var cc=$(this).find('span.l-btn-empty').attr('class').split(' ');

var icon=cc[1].split('-')[1];

return icon + ' 頁面';

}

});

</script>

一，定制提示信息風格

</div>

</div>

$(function(){

$("#pp1").tooltip({

position:'right',

content: '<span style="color:#fff">這是一種風格的提示信息.</span>',

onShow : function(){

$(this).tooltip('tip').css({

backgroundColor: '#666',

borderColor: '#666'

});

}

});

$("#pp2").tooltip({

position: 'bottom',

content: '<div style="padding:5px;background:#eee;color:#000">這又是一種風格的提示信息.</div>',

onShow: function(){

$(this).tooltip('tip').css({

backgroundColor: '#fff000',

borderColor: '#ff0000',

boxShadow: '1px 1px 3px #292929'

});

onPosition: function(){

$(this).tooltip('tip').css('left', $(this).offset().left);

$(this).tooltip('arrow').css('left', 20);

}

});

</script>

二，提示信息組件作為工具條

<h2>提示信息組件作為工具條</h2>

<p>

<a id="dd" href="javascript：void(0)" class="easyui-tooltip"

data-options="

hideEvent: 'none',

content: function(){

return $('#toolbar');

onShow: function(){

var t=$(this);

t.tooltip('tip').focus().unbind().bind('blur',function(){

t.tooltip('hide');

});

}

">到我這來</a>

搞出一個工具條.

</p>

</div>

<a href="#" class="easyui-linkbutton easyui-tooltip" title="添加"

data-options="iconCls:'icon-add',plain:true"></a> <a href="#"

class="easyui-linkbutton easyui-tooltip" title="剪切"

data-options="iconCls:'icon-cut',plain:true"></a> <a href="#"

class="easyui-linkbutton easyui-tooltip" title="刪除"

data-options="iconCls:'icon-remove',plain:true"></a> <a href="#"

class="easyui-linkbutton easyui-tooltip" title="撤銷"

data-options="iconCls:'icon-undo',plain:true"></a> <a href="#"

class="easyui-linkbutton easyui-tooltip" title="恢復"

data-options="iconCls:'icon-redo',plain:true"></a>

</div>

三，Ajax 提示信息

<h2>Ajax提示信息</h2>

<a href="#" class="easyui-tooltip" data-options="

content: $('<div></div>'),

onShow: function(){

$(this).tooltip('arrow').css('left', 20);

$(this).tooltip('tip').css('left', $(this).offset().left);

onUpdate: function(cc){

cc.panel({

width: 500,

height: 'auto',

border: false,

href: 'common/_content.html'

});

}

">到我這來</a> 顯示AJAX加載的提示信息.

四，提示信息對話框

<h2>提示信息對話框</h2>

<p><a id="dd" href="javascript：void(0)">點這里</a> 來顯示一個提示信息對話框.

</div>

$(function(){

$('#dd').tooltip({

content: $('<div></div>'),

showEvent: 'click',

onUpdate: function(content){

content.panel({

width: 200,

border: false,

title: '登錄',

href: 'common/_dialog.html'

});

onShow: function(){

var t=$(this);

t.tooltip('tip').unbind().bind('mouseenter', function(){

t.tooltip('show');

}).bind('mouseleave', function(){

t.tooltip('hide');

});

}

});

</script>

Window 組件

一，基本窗體組件

窗體內容。

</div>

二，定制窗體工具

</div>

</body>

窗體

</div>

<a href="javascript：void(0)" class="icon-add"

onclick="javascript：alert('add')"></a> <a href="javascript：void(0)"

class="icon-edit" onclick="javascript：alert('edit')"></a> <a

href="javascript：void(0)" class="icon-cut"

onclick="javascript：alert('cut')"></a> <a href="javascript：void(0)"

class="icon-help" onclick="javascript：alert('help')"></a>

</div>

三，內部窗體

<a href="javascript：void(0)" class="easyui-linkbutton"

onclick="$('#w').window('open')">打開</a> <a href="javascript：void(0)"

class="easyui-linkbutton" onclick="$('#w').window('close')">關閉</a>

</div>

<div

style="position: relative; width: 500px; height: 300px; border: 1px solid #ccc; overflow: auto;">

<div id="w" class="easyui-window"

data-options="title:'內部窗體',inline:true"

style="width: 250px; height: 150px; padding: 10px">窗體在它的父層里面。</div>

</div>

四，模態(tài)窗體

</div>

窗體內容

</div>

一，窗體布局

</div>

jQuery EasyUI框架能夠讓你輕松構建Web頁面.

</div>

</div>

Dialog 組件

一，基本對話窗體組件

</div>

對話窗體內容。

</div>

二，工具欄和按鈕

</div>

<div id="w" class="easyui-dialog" title="工具欄和按鈕" data-options="

iconCls:'icon-save',

toolbar:[{

text:'添加',

iconCls:'icon-add',

handler:function(){

alert('添加');

}

},'-',{

text:'保存',

iconCls:'icon-save',

handler:function(){

alert('保存')

}

}],

buttons: [{

text:'確定',

iconCls:'icon-ok',

handler:function(){

alert('確定');

}

},{

text:'關閉',

handler:function(){

alert('關閉');;

}

}]

" style="width:400px;height:200px;padding:10px">

對話窗體內容。

</div>

三，對話窗體上的復雜工具欄

<h2>對話窗體上的復雜工具欄</h2>

</div>

<div id="dlg" class="easyui-dialog" title="對話窗體上的復雜工具欄" style="width:400px;height:200px;padding:10px"

data-options="

iconCls: 'icon-save',

toolbar: '#dlg-toolbar',

buttons: '#dlg-buttons'

對話窗體內容.

</div>

<tr>

</td>

</td>

</tr>

</table>

</div>

</div>

Tabs 組件

一，基本選項卡組件

<p style="font-size:14px">jQuery EasyUI框架能夠讓你輕松構建Web頁面.</p>

<ul>

<li>easyui是一套基于JQuery的用戶界面插件集合.</li>

<li>easyui為構建現(xiàn)代流行的交互式體驗JavaScript應用程序提供了基本功能.</li>

<li>使用easyui你不需要寫很多javascript代碼，你通常只需要寫一些html標簽來定義用戶界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能夠有效地節(jié)省你的開發(fā)時間.</li>

<li>easyui很簡單但是很強大.</li>

</ul>

</div>

</div>

這是幫助內容.

</div>

二，選項卡自適應高度

三，選項卡自動切換

<h2>選項卡自動切換</h2>

<p style="font-size:14px">jQuery EasyUI框架能夠讓你輕松構建Web頁面.</p>

<ul>

<li>easyui是一套基于JQuery的用戶界面插件集合.</li>

<li>easyui為構建現(xiàn)代流行的交互式體驗JavaScript應用程序提供了基本功能.</li>

<li>使用easyui你不需要寫很多javascript代碼，你通常只需要寫一些html標簽來定義用戶界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能夠有效地節(jié)省你的開發(fā)時間.</li>

<li>easyui很簡單但是很強大.</li>

</ul>

</div>

</div>

這是幫助內容.

</div>

$(function(){

var tabs=$('#tt').tabs().tabs('tabs');

for(var i=0; i<tabs.length; i++){

tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){

$('#tt').tabs('select', e.data.index);

});

}

});

</script>

四，選項卡嵌套

<h2>選項卡嵌套</h2>

</div>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

五，選項卡片工具

<h2>選項卡片工具</h2>

<p style="font-size:14px">jQuery EasyUI框架能夠讓你輕松構建Web頁面.</p>

<ul>

<li>easyui是一套基于JQuery的用戶界面插件集合.</li>

<li>easyui為構建現(xiàn)代流行的交互式體驗JavaScript應用程序提供了基本功能.</li>

<li>使用easyui你不需要寫很多javascript代碼，你通常只需要寫一些html標簽來定義用戶界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能夠有效地節(jié)省你的開發(fā)時間.</li>

<li>easyui很簡單但是很強大.</li>

</ul>

</div>

這是幫助內容.

</div>

</div>

二，選項卡工具

<h2>選項卡工具</h2>

</div>

</div>

var index=0;

function addPanel(){

index++;

$('#tt').tabs('add',{

title: '選項卡'+index,

content: '<div style="padding:10px">內容'+index+'</div>',

closable: true

});

}

function removePanel(){

var tab=$('#tt').tabs('getSelected');

if (tab){

var index=$('#tt').tabs('getTabIndex', tab);

$('#tt').tabs('close', index);

}

</script>

三，選項卡位置

<h2>選項卡位置</h2>

</select>

</div>

<p style="font-size:14px">jQuery EasyUI框架能夠讓你輕松構建Web頁面.</p>

<ul>

<li>easyui是一套基于JQuery的用戶界面插件集合.</li>

<li>easyui為構建現(xiàn)代流行的交互式體驗JavaScript應用程序提供了基本功能.</li>

<li>使用easyui你不需要寫很多javascript代碼，你通常只需要寫一些html標簽來定義用戶界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能夠有效地節(jié)省你的開發(fā)時間.</li>

<li>easyui很簡單但是很強大.</li>

</ul>

</div>

</div>

這是幫助內容.

</div>

Accordion 組件

一，基本可折疊面板組件

<h2>基本可折疊面板</h2>

<h3 style="color:#0099FF;">可折疊面板</h3>

<p>可折疊面板是jquery easyui框架的一部分. 他可以讓你輕松地在Web頁面上定義可折疊元素.</p>

</div>

<p>可折疊面板允許你同時顯示多個面板，每個面板支持展開和折疊，點擊面板頭部展開和折疊面板體，面板內容可以通過AJAX加載，用戶能夠定義某一個面板默認選中，如果沒有指定，則第一個面板默認選中。</p>

</div>

<li>

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

二，可折疊面板工具

<h2>可折疊面板工具</h2>

<h3 style="color:#0099FF;">可折疊面板</h3>

<p>可折疊面板是jquery easyui框架的一部分. 他可以讓你輕松地在Web頁面上定義可折疊元素.</p>

</div>

</div>

<div title="數(shù)據(jù)表格" style="padding:10px" data-options="

selected:true,

tools:[{

iconCls:'icon-reload',

handler:function(){

$('#dg').datagrid('reload');

}

}]">

<table id="dg" class="easyui-datagrid"

data-options="url:'common/datagrid_data1.json',fit:true,fitColumns:true,singleSelect:true">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

三，通過AJAX 加載內容

<h2>通過AJAX加載內容</h2>

<h3 style="color:#0099FF;">可折疊面板</h3>

<p>可折疊面板是jquery easyui框架的一部分. 他可以讓你輕松地在Web頁面上定義可折疊元素.</p>

</div>

<p>可折疊面板允許你同時顯示多個面板，每個面板支持展開和折疊，點擊面板頭部展開和折疊面板體，面板內容可以通過AJAX加載，用戶能夠定義某一個面板默認選中，如果沒有指定，則第一個面板默認選中.</p>

</div>

</div>

四，可折疊面板相關操作

<h2>可折疊面板相關操作</h2>

</div>

<h3 style="color:#0099FF;">可折疊面板</h3>

<p>可折疊面板是jquery easyui框架的一部分. 他可以讓你輕松地在Web頁面上定義可折疊元素.</p>

</div>

function selectPanel(){

$.messager.prompt('系統(tǒng)提示','請輸入面板標題:',function(s){

if (s){

$('#aa').accordion('select',s);

}

});

}

var idx=1;

function addPanel(){

$('#aa').accordion('add',{

title:'標題'+idx,

content:'<div style="padding:10px">內容'+idx+'</div>'

});

idx++;

}

function removePanel(){

var pp=$('#aa').accordion('getSelected');

if (pp){

var index=$('#aa').accordion('getPanelIndex',pp);

$('#aa').accordion('remove',index);

}

</script>

Layout 組件

一，基本布局組件

<table class="easyui-datagrid"

data-options="url:'common/datagrid_data1.json',border:false,singleSelect:true,fit:true,fitColumns:true">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

二，全屏

</body>

三，嵌套布局

</div>

四，布局中無折疊按鈕

<h2>布局中無折疊按鈕</h2>

<table id="tt" class="easyui-propertygrid"

data-options="

url: 'common/propertygrid_data1.json',

showGroup: true,

fit: true,

border: false

</table>

</div>

</div>

一，添加和刪除布局組件

<h2>添加和刪除布局組件</h2>

<span>選擇一個區(qū)域面板:</span>

</select>

</div>

</div>

function addPanel(){

var region=$('#region').val();

var options={

region: region

};

if (region=='north' || region=='south'){

options.height=50;

} else {

options.width=100;

options.split=true;

options.title=$('#region option:selected').text();

}

$('#cc').layout('add', options);

}

function removePanel(){

$('#cc').layout('remove', $('#region').val());

}

</script>

二，復雜布局

</div>

內容一

</div>

內容二

</div>

內容三

</div>

<table class="easyui-datagrid"

data-options="url:'common/datagrid_data1.json',singleSelect:true,fit:true,fitColumns:true">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

Menu 組件

一，基本菜單組件

<h2>基本菜單組件</h2>

<div>

<div>Excel</div>

<div>PowerPoint</div>

<div>

<div>

</div>

</div>

<div>

<span>Window Demos</span>

<div data-options="href:'window.html'">Window</div>

<div data-options="href:'dialog.html'">Dialog</div>

<div><a target="_blank">EasyUI</a></div>

</div>

</div>

$(function(){

$(document).bind('contextmenu',function(e){

e.preventDefault();

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY

});

</script>

二，定制菜單組件

<div>

<div style="font-weight:bold;font-size:16px">選擇一種語言:</div>

<li><a href="javascript：void(0)">Basic</a></li>

<li><a href="javascript：void(0)">Fortran</a></li>

<li>

<input>

</li>

</ul>

</div>

</div>

$(function(){

$(document).bind('contextmenu',function(e){

e.preventDefault();

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY

});

</script>

三，菜單事件

</div>

function menuHandler(item){

alert(item.name);

}

$(function(){

$(document).bind('contextmenu',function(e){

e.preventDefault();

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY

});

</script>

LinkButton 組件

一，基本鏈接按鈕組件

</div>

二，普通鏈接按鈕

</div>

三，按鈕圖標對齊方式

</div>

<span>選擇圖標對齊位置: </span>

</select>

</div>

一，開關按鈕

</div>

五，按鈕組

</div>

</div>

MenuButton 組件

一，基本菜單按鈕

</div>

<div>

<div>導航工具條</div>

<div>書簽工具條</div>

<div>新建工具條...</div>

</div>

</div>

</div>

<p style="font-size:14px;color:#444;">EasyUI就是好.</p>

</div>

二，菜單按鈕相關操作

<h2>菜單按鈕相關操作</h2>

</div>

</div>

<div>

<div>導航工具條</div>

<div>書簽工具條</div>

<div>新建工具條...</div>

</div>

</div>

</div>

<p style="font-size:14px;color:#444;">EasyUI就是好.</p>

</div>

SplitButton 組件

一，基本分隔按鈕

<h2>基本分隔按鈕</h2>

</div>

<div>

<div>導航工具條</div>

<div>書簽工具條</div>

<div>新建工具條...</div>

</div>

</div>

</div>

<div>

<p style="font-size:14px;color:#444">EasyUI就是好.</p>

</div>

二，分隔按鈕的相關操作

</div>

</div>

<div>

<div>導航工具條</div>

<div>書簽工具條</div>

<div>新建工具條...</div>

</div>

</div>

</div>

<div>

<p style="font-size:14px;color:#444">EasyUI就是好.</p>

</div>

DataGrid 組件

一，基本數(shù)據(jù)表格

<table class="easyui-datagrid" title="基本數(shù)據(jù)表格" style="width:700px;height:250px"

data-options="singleSelect:true,collapsible:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

二，Table 轉換數(shù)據(jù)表格

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>

</tr>

<tr>

<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>

</tr>

<tr>

<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>

</tr>

<tr>

<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>

</tr>

<tr>

<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>

</tr>

</tbody>

</table>

三，數(shù)據(jù)表格行邊框

.lines-both .datagrid-body td{

}

.lines-no .datagrid-body td{

border-right:1px dotted transparent;

border-bottom:1px dotted transparent;

}

.lines-right .datagrid-body td{

border-bottom:1px dotted transparent;

}

.lines-bottom .datagrid-body td{

border-right:1px dotted transparent;

}

</style>

<h2>數(shù)據(jù)表格中的行邊框</h2>

</select>

</div>

<table id="dg" class="easyui-datagrid" title="數(shù)據(jù)表格中的行邊框" style="width:705px;height:250px"

data-options="singleSelect:true,fitColumns:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

function changeBorder(cls){

$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);

}

</script>

四，數(shù)據(jù)表格選擇模型

<h2>數(shù)據(jù)表格選擇模型</h2>

<a href="#" class="easyui-linkbutton" onclick="getSelected()">獲取單選數(shù)據(jù)</a>

<a href="#" class="easyui-linkbutton" onclick="getSelections()">獲取多選數(shù)據(jù)</a>

</div>

<table id="dg" class="easyui-datagrid" title="數(shù)據(jù)表格選擇模型" style="width:705px;height:250px"

data-options="singleSelect:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

</select>

</div>

function getSelected(){

var row=$('#dg').datagrid('getSelected');

if (row){

$.messager.alert('系統(tǒng)提示', row.itemid+":"+row.productid+":"+row.attr1);

}

function getSelections(){

var ss=[];

var rows=$('#dg').datagrid('getSelections');

for(var i=0; i<rows.length; i++){

var row=rows[i];

ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>');

}

$.messager.alert('系統(tǒng)提示', ss.join('<br/>'));

}

</script>

二，數(shù)據(jù)表格工具條

<h2>數(shù)據(jù)表格工具條</h2>

<table class="easyui-datagrid" title="數(shù)據(jù)表格工具條" style="width:705px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'common/datagrid_data1.json',toolbar:toolbar">

<thead>

<tr>

</tr>

</thead>

</table>

var toolbar=[{

text:'添加',

iconCls:'icon-add',

handler:function(){alert('添加')}

},{

text:'剪切',

iconCls:'icon-cut',

handler:function(){alert('剪切')}

},'-',{

text:'保存',

iconCls:'icon-save',

handler:function(){alert('保存')}

}];

</script>

六，數(shù)據(jù)表格復雜工具條

<table class="easyui-datagrid" title="數(shù)據(jù)表格復雜工具條" style="width:705px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'common/datagrid_data1.json',toolbar:'#tb'">

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<div>

日期從: <input class="easyui-datebox" style="width:80px">

到: <input class="easyui-datebox" style="width:80px">

語言:

<option value="basic">Basic</option>

<option value="python">Python</option>

</select>

</div>

七，定制數(shù)據(jù)表格分頁

<table id="dg" class="easyui-datagrid" title="定制數(shù)據(jù)表格分頁" style="width:705px;height:250px"

data-options="rownumbers:true,singleSelect:true,pagination:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

$(function(){

var pager=$('#dg').datagrid('getPager'); // get the pager of datagrid

pager.pagination({

buttons:[{

iconCls:'icon-search',

handler:function(){

alert('搜索');

}

},{

iconCls:'icon-add',

handler:function(){

alert('添加');

}

},{

iconCls:'icon-edit',

handler:function(){

alert('編輯');

}

}]

});

})

</script>

八，列組合

<table class="easyui-datagrid" title="列組合" style="width:705px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

<th colspan="4">產品詳細信息</th>

</tr>

<tr>

</tr>

</thead>

</table>

九，數(shù)據(jù)表格列對齊

<table class="easyui-datagrid" title="數(shù)據(jù)表格列對齊" style="width:700px;height:250px"

data-options="singleSelect:true,collapsible:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

十，數(shù)據(jù)表格中凍結列

<table class="easyui-datagrid" title="數(shù)據(jù)表格中凍結列" style="width:700px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'../datagrid/datagrid_data1.json'">

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

</thead>

</table>

十一，格式化數(shù)據(jù)表格列

<table class="easyui-datagrid" title="格式化數(shù)據(jù)表格列" style="width:700px;height:250px"

data-options="rownumbers:true,singleSelect:true,iconCls:'icon-ok',url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

十二，數(shù)據(jù)表格中凍結行

<table class="easyui-datagrid" title="數(shù)據(jù)表格中凍結" style="width:700px;height:250px"

data-options="

singleSelect: true,

collapsible: true,

rownumbers: true,

url: 'common/datagrid_data1.json',

onLoadSuccess: function(){

$(this).datagrid('freezeRow',0).datagrid('freezeRow',0);

}

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

</thead>

</table>

function formatPrice(val,row){

if (val < 30){

return '<span style="color:red;">('+val+')</span>';

} else {

return val;

}

</script>

十三，數(shù)據(jù)表格中的行編輯

<table id="dg" class="easyui-datagrid" title="數(shù)據(jù)表格中的行編輯" style="width:700px;height:auto"

data-options="

iconCls: 'icon-edit',

singleSelect: true,

toolbar: '#tb',

url: 'common/datagrid_data1.json',

onClickRow: onClickRow

<thead>

<tr>

<th data-options="field:'productid',width:100,

formatter:function(value,row){

return row.productname;

editor:{

type:'combobox',

options:{

valueField:'productid',

textField:'productname',

url:'common/products.json',

required:true

}

}">產品</th>

</tr>

</thead>

</table>

</div>

var editIndex=undefined;

function endEditing(){

if (editIndex==undefined){return true}

if ($('#dg').datagrid('validateRow', editIndex)){

var ed=$('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});

var productname=$(ed.target).combobox('getText');

$('#dg').datagrid('getRows')[editIndex]['productname']=productname;

$('#dg').datagrid('endEdit', editIndex);

editIndex=undefined;

return true;

} else {

return false;

}

function onClickRow(index){

if (editIndex !=index){

if (endEditing()){

$('#dg').datagrid('selectRow', index)

.datagrid('beginEdit', index);

editIndex=index;

} else {

$('#dg').datagrid('selectRow', editIndex);

}

function append(){

if (endEditing()){

$('#dg').datagrid('appendRow',{status:'P'});

editIndex=$('#dg').datagrid('getRows').length-1;

$('#dg').datagrid('selectRow', editIndex)

.datagrid('beginEdit', editIndex);

}

function remove(){

if (editIndex==undefined){return}

$('#dg').datagrid('cancelEdit', editIndex)

.datagrid('deleteRow', editIndex);

editIndex=undefined;

}

function accept(){

if (endEditing()){

$('#dg').datagrid('acceptChanges');

}

function reject(){

$('#dg').datagrid('rejectChanges');

editIndex=undefined;

}

function getChanges(){

var rows=$('#dg').datagrid('getChanges');

alert(rows.length+' rows are changed!');

}

</script>

十四，數(shù)據(jù)表格行樣式

<table class="easyui-datagrid" title="數(shù)據(jù)表格行樣式" style="width:700px;height:250px"

data-options="

singleSelect: true,

iconCls: 'icon-save',

url: 'common/datagrid_data1.json',

rowStyler: function(index,row){

if (row.listprice < 30){

return 'background-color:#6293BB;color:#fff;font-weight:bold;';

}

<thead>

<tr>

</tr>

</thead>

</table>

十五，數(shù)據(jù)表格單元格樣式

<table class="easyui-datagrid" title="數(shù)據(jù)表格單元格樣式" style="width:700px;height:250px"

data-options="

singleSelect: true,

iconCls: 'icon-save',

url: 'common/datagrid_data1.json'

<thead>

<tr>

</tr>

</thead>

</table>

function cellStyler(value,row,index){

if (value < 30){

return 'background-color:#ffee00;color:red;';

}

</script>

十六，數(shù)據(jù)表格頁腳行

<table class="easyui-datagrid" title="數(shù)據(jù)表格頁腳行" style="width:700px;height:220px"

data-options="

url: 'common/datagrid_data2.json',

fitColumns: true,

singleSelect: true,

rownumbers: true,

showFooter: true

<thead>

<tr>

</tr>

</thead>

</table>

十七，數(shù)據(jù)表格客戶端分頁

<table id="dg" title="客戶端分頁" style="width:700px;height:300px" data-options="

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10">

<thead>

<tr>

</tr>

</thead>

</table>

function getData(){

var rows=[];

for(var i=1; i<=800; i++){

var amount=Math.floor(Math.random()*1000);

var price=Math.floor(Math.random()*1000);

rows.push({

inv: i+'月',

date: $.fn.datebox.defaults.formatter(new Date()),

amount: amount,

price: price,

cost: amount*price,

note: '備注 '+i

});

}

return rows;

}

function pagerFilter(data){

if (typeof data.length=='number' && typeof data.splice=='function'){ // is array

data={

total: data.length,

rows: data

}

var dg=$(this);

var opts=dg.datagrid('options');

var pager=dg.datagrid('getPager');

pager.pagination({

onSelectPage:function(pageNum, pageSize){

opts.pageNumber=pageNum;

opts.pageSize=pageSize;

pager.pagination('refresh',{

pageNumber:pageNum,

pageSize:pageSize

});

dg.datagrid('loadData',data);

}

});

if (!data.originalRows){

data.originalRows=(data.rows);

}

var start=(opts.pageNumber-1)*parseInt(opts.pageSize);

var end=start + parseInt(opts.pageSize);

data.rows=(data.originalRows.slice(start, end));

return data;

}

$(function(){

$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());

});

</script>

十八，數(shù)據(jù)表格復選框選擇模型

<h2>數(shù)據(jù)表格復選框選擇模型</h2>

<table id="dg" class="easyui-datagrid" title="數(shù)據(jù)表格復選框選擇模型" style="width:705px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'common/datagrid_data1.json'">

<thead>

<tr>

</tr>

</thead>

</table>

</select><br/>

選擇聯(lián)動復選框: <input type="checkbox" checked onchange="$('#dg').datagrid({selectOnCheck:$(this).is(':checked')})"><br/>

復選框聯(lián)動選擇: <input type="checkbox" checked onchange="$('#dg').datagrid({checkOnSelect:$(this).is(':checked')})">

</div>

十九，數(shù)據(jù)表格右鍵菜單

$(function(){

$('#dg').datagrid({

url: 'common/datagrid_data1.json',

title: '數(shù)據(jù)表格右鍵菜單',

iconCls: 'icon-save',

width: 700,

height: 250,

fitColumns: true,

singleSelect: true,

columns:[[

{field:'itemid',title:'編號',width:80},

{field:'productid',title:'產品編號',width:120},

{field:'listprice',title:'市場價',width:80,align:'right'},

{field:'unitcost',title:'成本價',width:80,align:'right'},

{field:'attr1',title:'描述',width:250},

{field:'status',title:'狀態(tài)',width:60,align:'center'}

]],

onHeaderContextMenu: function(e, field){

e.preventDefault();

if (!cmenu){

createColumnMenu();

}

cmenu.menu('show', {

left:e.pageX,

top:e.pageY

});

}

});

var cmenu;

function createColumnMenu(){

cmenu=$('<div/>').appendTo('body');

cmenu.menu({

onClick: function(item){

if (item.iconCls=='icon-ok'){

$('#dg').datagrid('hideColumn', item.name);

cmenu.menu('setIcon', {

target: item.target,

iconCls: 'icon-empty'

});

} else {

$('#dg').datagrid('showColumn', item.name);

cmenu.menu('setIcon', {

target: item.target,

iconCls: 'icon-ok'

});

}

});

var fields=$('#dg').datagrid('getColumnFields');

for(var i=0; i<fields.length; i++){

var field=fields[i];

var col=$('#dg').datagrid('getColumnOption', field);

cmenu.menu('appendItem', {

text: col.title,

iconCls: 'icon-ok'

});

}

</script>

二十，數(shù)據(jù)表格合并單元格

<table class="easyui-datagrid" title="數(shù)據(jù)表格合并單元格" style="width:700px;height:250px"

data-options="

rownumbers: true,

singleSelect: true,

iconCls: 'icon-save',

url: '../datagrid/datagrid_data1.json',

onLoadSuccess: onLoadSuccess

<thead>

<tr>

</tr>

</thead>

</table>

function onLoadSuccess(data){

var merges=[{

index: 2,

rowspan: 2

},{

index: 5,

rowspan: 2

},{

index: 7,

rowspan: 2

}];

for(var i=0; i<merges.length; i++){

$(this).datagrid('mergeCells',{

index: merges[i].index,

field: 'productid',

rowspan: merges[i].rowspan

});

}

</script>

PropertyGrid 組件

一，基本屬性表格

</div>

<table id="pg" class="easyui-propertygrid" style="width:300px"

data-options="url:'common/propertygrid_data1.json',showGroup:true,scrollbarSize:0"></table>

function showGroup(){

$('#pg').propertygrid({

showGroup:true

});

}

function hideGroup(){

$('#pg').propertygrid({

showGroup:false

});

}

function showHeader(){

$('#pg').propertygrid({

showHeader:true

});

}

function hideHeader(){

$('#pg').propertygrid({

showHeader:false

});

}

function getChanges(){

var s='';

var rows=$('#pg').propertygrid('getChanges');

for(var i=0; i<rows.length; i++){

s +=rows[i].name + ':' + rows[i].value + ',';

}

alert(s)

}

</script>

二，屬性表格定制列

<table class="easyui-propertygrid" style="width:300px" data-options="

url: 'common/propertygrid_data1.json',

showGroup: true,

scrollbarSize: 0,

columns: mycolumns

</table>

var mycolumns=[[

{field:'name',title:'名稱',width:100,sortable:true},

{field:'value',title:'值',width:100,resizable:false}

]];

</script>

三，分組格式化

<table class="easyui-propertygrid" style="width:300px" data-options="

url: 'common/propertygrid_data1.json',

showGroup: true,

scrollbarSize: 0,

groupFormatter: groupFormatter

</table>

function groupFormatter(fvalue, rows){

return fvalue + ' - <span style="color:red">' + rows.length + ' 行</span>';

}

</script>

Tree 組件

一，基本樹組件

<li>

<span>My Documents</span>

<ul>

<span>Photos</span>

<ul>

<li>

<span>Friend</span>

</li>

<li>

</li>

<li>

<span>Company</span>

</li>

</ul>

</li>

<li>

<span>Program Files</span>

<ul>

<li>Intel</li>

<li>Microsoft Office</li>

<li>Games</li>

</ul>

</li>

<li>index.html</li>

<li>about.html</li>

<li>welcome.html</li>

</ul>

</li>

</ul>

二，動畫效果樹

三，復選框樹

<a href="#" class="easyui-linkbutton" onclick="getChecked()">獲取選中值</a>

<br/>

<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">級聯(lián)選中

<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">只有葉子節(jié)點有復選框

</div>

function getChecked(){

var nodes=$('#tt').tree('getChecked');

var s='';

for(var i=0; i<nodes.length; i++){

if (s !='') s +=',';

s +=nodes[i].text;

}

alert(s);

}

</script>

四，樹結構線

五，樹節(jié)點圖標

六，樹相關操作

<a href="#" class="easyui-linkbutton" onclick="getSelected()">獲取選中節(jié)點</a>

</div>

function collapseAll(){

$('#tt').tree('collapseAll');

}

function expandAll(){

$('#tt').tree('expandAll');

}

function expandTo(){

var node=$('#tt').tree('find',113);

$('#tt').tree('expandTo', node.target).tree('select', node.target);

}

function getSelected(){

var node=$('#tt').tree('getSelected');

if (node){

var s=node.text;

if (node.attributes){

s +=","+node.attributes.p1+","+node.attributes.p2;

}

alert(s);

}

</script>

七，樹右鍵菜單

<ul id="tt" class="easyui-tree" data-options="

url: 'common/tree_data1.json',

animate: true,

onContextMenu: function(e,node){

e.preventDefault();

$(this).tree('select',node.target);

$('#mm').menu('show',{

left: e.pageX,

top: e.pageY

});

}

"></ul>

</div>

function append(){

var t=$('#tt');

var node=t.tree('getSelected');

t.tree('append', {

parent: (node?node.target:null),

data: [{

text: 'new item1'

},{

text: 'new item2'

}]

});

}

function remove(){

var node=$('#tt').tree('getSelected');

$('#tt').tree('remove', node.target);

}

function collapse(){

var node=$('#tt').tree('getSelected');

$('#tt').tree('collapse',node.target);

}

function expand(){

var node=$('#tt').tree('getSelected');

$('#tt').tree('expand',node.target);

}

</script>

三，可編輯樹

<ul id="tt" class="easyui-tree" data-options="

url: '../tree/tree_data1.json',

animate: true,

onClick: function(node){

$(this).tree('beginEdit',node.target);

}

"></ul>

四，拖放樹節(jié)點

TreeGrid 組件

一，基本樹行表格

<table title="文件瀏覽" class="easyui-treegrid" style="width:700px;height:250px"

data-options="

url: 'common/treegrid_data1.json',

rownumbers: true,

idField: 'id',

treeField: 'name'

<thead>

<tr>

</tr>

</thead>

</table>

二，樹形表格相關操作

</div>

<table id="tg" class="easyui-treegrid" title="樹形表格相關操作" style="width:700px;height:250px"

data-options="

iconCls: 'icon-ok',

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: 'common/treegrid_data2.json',

idField: 'id',

treeField: 'name'

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s='<div style="width:100%;border:1px solid #ccc">' +

'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

'</div>';

return s;

} else {

return '';

}

function collapseAll(){

$('#tg').treegrid('collapseAll');

}

function expandAll(){

$('#tg').treegrid('expandAll');

}

function expandTo(){

$('#tg').treegrid('expandTo',21).treegrid('select',21);

}

</script>

三，樹形表格右鍵菜單

<table id="tg" class="easyui-treegrid" title="樹形表格右鍵菜單" style="width:700px;height:250px"

data-options="

iconCls: 'icon-ok',

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: 'common/treegrid_data2.json',

idField: 'id',

treeField: 'name',

onContextMenu: onContextMenu

<thead>

<tr>

</tr>

</thead>

</table>

</div>

function formatProgress(value){

if (value){

var s='<div style="width:100%;border:1px solid #ccc">' +

'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

'</div>';

return s;

} else {

return '';

}

function onContextMenu(e,row){

e.preventDefault();

$(this).treegrid('select', row.id);

$('#mm').menu('show',{

left: e.pageX,

top: e.pageY

});

}

var idIndex=100;

function append(){

idIndex++;

var d1=new Date();

var d2=new Date();

d2.setMonth(d2.getMonth()+1);

var node=$('#tg').treegrid('getSelected');

$('#tg').treegrid('append',{

parent: node.id,

data: [{

id: idIndex,

persons: parseInt(Math.random()*10),

begin: $.fn.datebox.defaults.formatter(d1),

end: $.fn.datebox.defaults.formatter(d2),

progress: parseInt(Math.random()*100)

}]

})

}

function removeIt(){

var node=$('#tg').treegrid('getSelected');

if (node){

$('#tg').treegrid('remove', node.id);

}

function collapse(){

var node=$('#tg').treegrid('getSelected');

if (node){

$('#tg').treegrid('collapse', node.id);

}

function expand(){

var node=$('#tg').treegrid('getSelected');

if (node){

$('#tg').treegrid('expand', node.id);

}

</script>

四，可編輯樹形表格

</div>

<table id="tg" class="easyui-treegrid" title="可編輯樹形表格" style="width:700px;height:250px"

data-options="

iconCls: 'icon-ok',

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: 'common/treegrid_data2.json',

idField: 'id',

treeField: 'name',

showFooter: true

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s='<div style="width:100%;border:1px solid #ccc">' +

'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

'</div>';

return s;

} else {

return '';

}

var editingId;

function edit(){

if (editingId !=undefined){

$('#tg').treegrid('select', editingId);

return;

}

var row=$('#tg').treegrid('getSelected');

if (row){

editingId=row.id

$('#tg').treegrid('beginEdit', editingId);

}

function save(){

if (editingId !=undefined){

var t=$('#tg');

t.treegrid('endEdit', editingId);

editingId=undefined;

var persons=0;

var rows=t.treegrid('getChildren');

for(var i=0; i<rows.length; i++){

var p=parseInt(rows[i].persons);

if (!isNaN(p)){

persons +=p;

}

var frow=t.treegrid('getFooterRows')[0];

frow.persons=persons;

t.treegrid('reloadFooter');

}

function cancel(){

if (editingId !=undefined){

$('#tg').treegrid('cancelEdit', editingId);

editingId=undefined;

}

</script>

五，樹形表格底部行

$(function(){

$('#tg').treegrid({

title:'樹形表格底部行',

iconCls:'icon-ok',

width:700,

height:250,

rownumbers: true,

animate:true,

collapsible:true,

fitColumns:true,

url:'common/treegrid_data2.json',

idField:'id',

treeField:'name',

showFooter:true,

columns:[[

{title:'任務名稱',field:'name',width:180},

{title:'人員',field:'persons',width:60,align:'right'},

{title:'開始日期',field:'begin',width:80},

{title:'結束日期',field:'end',width:80},

{title:'進度',field:'progress',width:120,

formatter:function(value){

if (value){

var s='<div style="width:100%;border:1px solid #ccc">' +

'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

'</div>';

return s;

} else {

return '';

}

]]

});

})

</script>

六，樹形表格報表

<table title="樹形表格報表" class="easyui-treegrid" style="width:750px;height:250px"

data-options="

url: 'common/treegrid_data3.json',

rownumbers: true,

showFooter: true,

idField: 'id',

treeField: 'region'

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

<tr>

</tr>

</thead>

</table>

八，樹形表格客戶端分頁

<table id="tg" class="easyui-treegrid" title="客戶端分頁" style="width:700px;height:250px"

data-options="

iconCls: 'icon-ok',

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: 'common/treegrid_data2.json',

idField: 'id',

treeField: 'name',

loadFilter: pagerFilter,

pagination: true,

pageSize: 2,

pageList: [2,5,10]

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s='<div style="width:100%;border:1px solid #ccc">' +

'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'

'</div>';

return s;

} else {

return '';

}

function pagerFilter(data){

if ($.isArray(data)){ // is array

data={

total: data.length,

rows: data

}

var dg=$(this);

var state=dg.data('treegrid');

var opts=dg.treegrid('options');

var pager=dg.treegrid('getPager');

pager.pagination({

onSelectPage:function(pageNum, pageSize){

opts.pageNumber=pageNum;

opts.pageSize=pageSize;

pager.pagination('refresh',{

pageNumber:pageNum,

pageSize:pageSize

});

dg.treegrid('loadData',data);

}

});

if (!data.topRows){

data.topRows=[];

data.childRows=[];

for(var i=0; i<data.rows.length; i++){

var row=data.rows[i];

row._parentId ? data.childRows.push(row) : data.topRows.push(row);

}

data.total=(data.topRows.length);

}

var start=(opts.pageNumber-1)*parseInt(opts.pageSize);

var end=start + parseInt(opts.pageSize);

data.rows=$.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));

return data;

}

</script>

Java 后臺交互（1）

一，簡單架構搭建

二，Json 開發(fā)包引入

三，JsonUtil 實現(xiàn)

四，分頁實現(xiàn)

五，分頁顯示所有用戶信息

Java 后臺交互（2）

一，實現(xiàn)用戶信息的添加，刪除，修改操作

Java 后臺交互（3）

一，引入Easyui 的可編輯數(shù)據(jù)表格Edatagrid

二，使用Edatagrid 來是實現(xiàn)用戶的CRUD 操作

Java 后臺交互（4）

一，引入Easyui 的]datagrid-detailview.js

二，使用datagrid-detailview.js 來是實現(xiàn)用戶的CRUD 操作

不知不覺吧，已經(jīng)9月份了，2019年已經(jīng)過了三分之二，又到了開學季，沒有資料怎么能行，小編最新把這教授結合的Python、Java資料整合起來，分享給需要的粉絲們。

Java

Java作為編程界最經(jīng)典的的語言之一，地位永遠不可撼動，需要學習java的小伙伴趕緊啦。

第1階段：Java基礎

1.認知基礎課程2. java入門階段3. 面向對象編程4. 飛機小項目5. 面向對象和數(shù)組6. 常用類7. 異常機制8. 容器和數(shù)據(jù)結構9. IO流技術10. 多線程11. 網(wǎng)絡編程12. 手寫服務器13. 注解和反射14. GOF23種設計模式15. 正則表達式16. JDBC數(shù)據(jù)庫操作17. 手寫SORM框架18. JAVA10新特性19.數(shù)據(jù)結構和算法20. JVM虛擬機講解21. XML技術解析

第2階段：數(shù)據(jù)庫開發(fā)全套課程

1.Oracle和SQL語言2.Mysql快速使用3.PowerDesigner使用4.JDBC數(shù)據(jù)庫5.Mysql優(yōu)化6.oracle深度講解

第3階段：網(wǎng)頁開發(fā)和設計

1.HTML基礎2.CSS基礎3.JavaScript編程4.jQuery5.easyUI

第4階段：Servlet和JSP實戰(zhàn)深入課程

1.Servlet入門和Tomcat2.request和response對象3.轉發(fā)和重定向_Cookie4.session_Context對象5.JSP6.用戶管理系統(tǒng)7.Ajax技術8.EL和JSTL標簽庫9.過濾器10.監(jiān)聽器

第5階段：高級框架階段

1.Mybatis2.Spring3.Spring MVC4.SSM框架整合5.RBAC權限控制項目6.Hibernate37.Hibernate48.jFinal9.Shiro安全框架10.Solr搜索框架11.Struts212.Nginx服務器13.Redis緩存技術14.JVM虛擬機優(yōu)化15.Zookeeper

第6階段：微服務架構階段

1.Spring Boot2.Spring Data3.Spring Cloud

第7階段：互聯(lián)網(wǎng)架構階段

1.Linux系統(tǒng)2.Maven技術3.Git4.SVN5.高并發(fā)編程6.系統(tǒng)和虛擬機調優(yōu)7.JAVA編程規(guī)范8.高級網(wǎng)絡編程9.Netty框架10.ActiveMQ消息中間件11.單點登錄SSO12.數(shù)據(jù)庫和SQL優(yōu)化13.數(shù)據(jù)庫集群和高并發(fā)14.Dubbo15.Redis16.VSFTPD+NGINX

第8階段：分布式億級高并發(fā)電商項目

第9階段：畢設項目第1季

1. 電子政務網(wǎng)2. 企業(yè)合同管理系統(tǒng)3. 健康管理系統(tǒng)4. 商品供應管理系統(tǒng)5. 土地檔案管理系統(tǒng)6. 聊天室設計和實現(xiàn)7. 碼頭配套和貨柜管理系統(tǒng)8. 百貨中心供應鏈系統(tǒng)9. 病歷管理系統(tǒng)10. 超市積分管理系統(tǒng)11. 動漫論壇12. 俄羅斯方塊13. 個人博客系統(tǒng)14. 固定資產管理系統(tǒng)15. 影視創(chuàng)作論壇16. 屏幕截圖工具17. 超級瑪麗游戲18. 飛機大戰(zhàn)游戲19. 雷電

第10階段：畢設項目第2季

1. 微博系統(tǒng)2. 寫字板3. 坦克大戰(zhàn)4. 推箱子5. 電腦彩票系統(tǒng)6. 記賬管理系統(tǒng)7. 新聞發(fā)布系統(tǒng)8. 醫(yī)院掛號系統(tǒng)9. 倉庫管理系統(tǒng)10. 停車場管理系統(tǒng)11. 網(wǎng)絡爬蟲12. 酒店管理系統(tǒng)13. 企業(yè)財務管理系統(tǒng)14. 車輛管理系統(tǒng)15. 員工信息管理系統(tǒng)16. 旅游網(wǎng)站17. 搜索引擎18. 進銷存管理系統(tǒng)19. 在線考試系統(tǒng)20. 物流信息網(wǎng)21. 住院管理系統(tǒng)22. 銀行柜員業(yè)務績效系統(tǒng)

Python

最近幾年Python編程語言在國內引起不小的轟動，有超越Java之勢，本來在美國這個編程語言就是最火的，應用的非常非常的廣泛，而Python的整體語言難度來講又比Java簡單的很多。尤其是在運維的應用中非常的廣泛，所以之前出了一句話，在如今的時代，運維不學Python，遲早會被淘汰！

如果你處于想學Python或者正在學習Python，Python的教程不少了吧，但是是最新的嗎？

2019Python自學教程全新升級為《Python+數(shù)據(jù)分析+機器學習》，七大階段能力逐級提升，打造技能更全面的全棧工程師。

階段一：Python基礎知識和高級特性

階段二：Linux基礎

階段三：數(shù)據(jù)庫原理和sql優(yōu)化

來“中國網(wǎng)”（CIIC_China）官方微信，回復“部位”，告訴你一個減肥小秘訣

欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫