 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / Re: Treegrid - Not able to highlight/select a row with background color
|
on: July 22, 2013, 07:32:38 PM
|
|
Sorry, my mistake. Forgot everything in treegrid does not have index param.
---
Sorry to bring up this thread.
Does the answer mean rowStyler does not work for treegrid?
I want to give the user a visual feedback, for example, red row means "this row has been edited, please remember to click on "save all" button." I had a flag in rowData to indicate it has been edited. How to make it shown?
|
|
|
|
|
5
|
General Category / EasyUI for jQuery / Re: datagrid in layout won't trigger scroll bar?
|
on: September 04, 2012, 07:59:32 PM
|
Sorry the code was copied from my project, in which the framework uses indent instead of close tags. I copied the code from broswer here. BTW: yours still did not work. <!doctype html><!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]--><head><meta charset="UTF-8"><title></title><meta name="description" content=""><meta name="author" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="http://10.9.1.251:3000/static/css/bootstrap.css?etag=nyE417Xw"><link rel="stylesheet" href="http://10.9.1.251:3000/static/easyui/themes/default/easyui.css?etag=qLhuF56v"><link rel="stylesheet" href="http://10.9.1.251:3000/static/easyui/themes/icon.css?etag=pM3wFiDp"><link rel="stylesheet" href="http://10.9.1.251:3000/static/jqplot/jquery.jqplot.min.css?etag=_HASKGQ7"><link rel="stylesheet" href="http://10.9.1.251:3000/static/tmp/x0PsQ9Am.css"><script src="http://10.9.1.251:3000/static/js/jquery-1.8.0.min.js?etag=C_4DH1Le"></script><script src="http://10.9.1.251:3000/static/easyui/jquery.easyui.min.js?etag=DdzmhucY"></script><script src="http://10.9.1.251:3000/static/easyui/jquery.edatagrid.js?etag=fL6eDT4x"></script><script src="http://10.9.1.251:3000/static/jqplot/jquery.jqplot.min.js?etag=-GN7z0wD"></script><script src="http://10.9.1.251:3000/static/jqplot/plugins/jqplot.blockRenderer.min.js?etag=NS4pzKRw"></script><script src="http://10.9.1.251:3000/static/tmp/_qIPJTDH.js"></script><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');</script></head><body class="easyui-layout"><div region="north" style="height:100px;background:#7f7f7f"><div style="float:left;height:100%"><a class="easyui-linkbutton" href="http://10.9.1.251:3000/devices">Manage Devices</a>
</div>
<div style="float:left">Magicloud</div>
<div style="float:right;height:100%"><select id="deviceList"><option value="{"nfURL":"http://10.9.1.251:3000/netflows/ctu1-co-acc-v1","ttURL":"http://10.9.1.251:3000/toptalker/ctu1-co-acc-v1"}">ctu1-co-acc-v1</option>
<option value="{"nfURL":"http://10.9.1.251:3000/netflows/ctu1-co-acc-v2","ttURL":"http://10.9.1.251:3000/toptalker/ctu1-co-acc-v2"}">ctu1-co-acc-v2</option>
</select>
<a class="easyui-linkbutton" onclick="this.href=$.parseJSON($('#deviceList')[0].options[$('#deviceList')[0].selectedIndex].value).ttURL">View Top Talker</a>
<a class="easyui-linkbutton" onclick="this.href=$.parseJSON($('#deviceList')[0].options[$('#deviceList')[0].selectedIndex].value).nfURL">View Net Flows</a>
</div>
</div>
<div region="south" style="text-align:right">GPLv3 https://github.com/magicloud/flow-web/</div>
<div region="east" style="width:0px"></div>
<div region="west" style="width:0px"></div>
<div region="center" style="padding:7px"><div style="float:left;width=200px"><div class="easyui-calendar" id="d"></div>
<input class="easyui-timespinner" required="required" showSeconds="false" id="t">
<br>
<a class="easyui-linkbutton" onclick="reload()">Goto</a>
</div>
<table class="easyui-datagrid" id="toptalker" rownumbers="true" fitColumns="true" singleSelect="true" sortName="octet" sortOrder="desc" remoteSort="false"><thead><tr><th field="packet" rowspan="2">Packets /s</th>
<th field="octet" rowspan="2">Octets /s</th>
<th field="start" rowspan="2" formatter="(function(value,row,index){return (new Date(parseInt(value.replace('/Date(','').replace(')/',''))));})">Start At</th>
<th field="end" rowspan="2" formatter="(function(value,row,index){return (new Date(parseInt(value.replace('/Date(','').replace(')/',''))));})">End At</th>
<th colspan="2">Source</th>
<th colspan="2">Destination</th>
</tr>
<tr><th field="srcAddr">Ip Address</th>
<th field="srcPort">Port</th>
<th field="dstAddr">Ip Address</th>
<th field="dstPort">Port</th>
</tr>
</thead>
</table>
</div>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. chromium.org/developers/how-tos/chrome-frame-getting-started --><!--[if lt IE 7 ]><script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script><script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script><![endif]--></body></html> Ok, I've checked your code. A few pointers to start with; jQuery does not like tags that are closed within the start tag, ie <div region="east" style="width:0px" />. These need proper closing tags - </div>. I also noticed that most of your table tags where missing closing tags. As for the scrolling action, this you will only see when there is data in your table. The following code should display your layout correctly. I've added width property to each column (I was testing with 1.2.6) and removed the format functions. <body class="easyui-layout">
<div region="north" style="height:100px;background:#7f7f7f"></div>
<div region="south" style="text-align:right"></div>
<div region="east" style="width:0px"></div>
<div region="west" style="width:0px"></div>
<div region="center">
<div class="easyui-panel">Control Area</div>
<hr>
<table id="tt" class="easyui-datagrid" singleSelect="true" iconCls="icon-save">
<thead>
<tr>
<th field="recordPushAt" rowspan="2" width="80" >Push At
<th field="recordPackets" rowspan="2" width="80" >Packets
<th field="recordOctets" rowspan="2" width="80" >Octets
<th field="recordStartAt" rowspan="2" width="80" >Start At
<th field="recordEndAt" rowspan="2" width="80" >End At
<th colspan="4" width="80" >Source
<th colspan="4" width="80" >Destination
<th field="recordNextHop" rowspan="2" width="80" >Next Hop
<th field="recordInput" rowspan="2" width="80" >Input
<th field="recordOutput" rowspan="2" width="80" >Output
<th field="recordProtocol" rowspan="2" width="80" >Protocol
<th field="recordTos" rowspan="2" width="80" >Tos
<th field="recordTcpFlags" rowspan="2" width="80" >Tcp Flags
<th colspan="2" width="80" >Engine
</tr>
<tr>
<th field="recordSrcAddr" width="80" >Ip Address
<th field="recordSrcMask" width="80" >Mask
<th field="recordSrcPort" width="80" >Port
<th field="recordSrcAS" width="80" >AS
<th field="recordDstAddr" width="80" >Ip Address
<th field="recordDstMask" width="80" >Mask
<th field="recordDstPort" width="80" >Port
<th field="recordDstAS" width="80" >AS
<th field="recordEngineType" width="80" >Engine Type
<th field="recordEngineId" width="80" >Engine Id
</tr>
</thead>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
</div>
</body>
|
|
|
|
|
6
|
General Category / EasyUI for jQuery / Re: datagrid in layout won't trigger scroll bar?
|
on: August 30, 2012, 07:24:55 PM
|
Hi, following is the code (for it is copied from my framework, some end tags are ignored). <body .easyui-layout>
<div region="north" style="height:100px;background:#7f7f7f"/>
<div region="south" style="text-align:right"/>
<div region="east" style="width:0px"/>
<div region="west" style="width:0px"/>
<div region="center" style="padding:7px" fit="true">
<div .easyui-panel>Control Area</div>
<hr>
<table id="netflows" .easyui-datagrid rownumbers="true" fitColumns="true" singleSelect="true" pagination="true">
<thead>
<tr>
<th field="recordPushAt" rowspan="2" formatter="(function(value,row,index){return (new Date(parseInt(value.replace('/Date(','').replace(')/',''))));})">Push At
<th field="recordPackets" rowspan="2">Packets
<th field="recordOctets" rowspan="2">Octets
<th field="recordStartAt" rowspan="2" formatter="(function(value,row,index){return (new Date(parseInt(value.replace('/Date(','').replace(')/',''))));})">Start At
<th field="recordEndAt" rowspan="2" formatter="(function(value,row,index){return (new Date(parseInt(value.replace('/Date(','').replace(')/',''))));})">End At
<th colspan="4">Source
<th colspan="4">Destination
<th field="recordNextHop" rowspan="2">Next Hop
<th field="recordInput" rowspan="2">Input
<th field="recordOutput" rowspan="2">Output
<th field="recordProtocol" rowspan="2">Protocol
<th field="recordTos" rowspan="2">Tos
<th field="recordTcpFlags" rowspan="2">Tcp Flags
<th colspan="2">Engine
<tr>
<th field="recordSrcAddr">Ip Address
<th field="recordSrcMask">Mask
<th field="recordSrcPort">Port
<th field="recordSrcAS">AS
<th field="recordDstAddr">Ip Address
<th field="recordDstMask">Mask
<th field="recordDstPort">Port
<th field="recordDstAS">AS
<th field="recordEngineType">Engine Type
<th field="recordEngineId">Engine Id
</div>
|
|
|
|
|
7
|
General Category / EasyUI for jQuery / datagrid in layout won't trigger scroll bar?
|
on: August 30, 2012, 01:58:16 AM
|
|
Hi, I am having a layout as the page main frame. In center panel, there is a datagrid. A few weird things here:
* If I set padding in center div, and the datagrid was large, then the right part of the datagrid would be out of the window and no horizontal scrollbar (I meant the one above datagrid pagination). Margin worked well.
* If the datagrid contained many lines, then the part below the window could not be reached. No vertical scrollbar at any place (the datagrid or the center panel or the whole page).
How to resolve this? I'd like to have a scroll bar dedicated to center panel instead of whole page.
|
|
|
|
|
