 Show Posts
|
|
Pages: 1 [2] 3 4
|
|
16
|
General Category / EasyUI for jQuery / Re: Datagrid only one column permanent 100% width
|
on: May 13, 2013, 06:18:35 AM
|
Hi tmark Try using the fitColumns option. ie <table id="dg" class="easyui-datagrid" title="DataGrid with Toolbar" data-options="fitColumns:true, fit:true">
<thead>
<tr>
<th field="itemid" width="100%">Col 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
</table>
Note: I had to set the column width to 100%. Without this, the column width is first set to a calculated width (header text width). Then when you resize the column (does not matter what size), it automatically jumps to the max size. |
|
|
|
|
17
|
General Category / EasyUI for jQuery / Re: default value for column field
|
on: May 12, 2013, 07:17:16 AM
|
I agree with Joe, option 2 (formatter) should work. Here is an example of this using jeasyui sample code. I just added the fixed column. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Maps Test</title>
<link class="jeasycss" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function fixcol() {
return '1234';
}
$(function () {
$('#dg').datagrid({
url: 'datagrid_data1.json',
height: 300,
width: 700,
fit: true,
striped: true,
singleSelect: true,
idField: 'productid',
columns: [[
{ field: 'fixcol', title: 'Fixed Col', width: 80, formatter: fixcol },
{ field: 'itemid', title: 'Item ID', width: 80},
{ field: 'productid', title: 'Product', width: 100 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
{ field: 'attr1', title: 'Attribute', width: 250},
{ field: 'status', title: 'Status', width:60, align: 'center' }
]],
});
});
</script>
</head>
<body>
<table id='dg'></table>
</body>
</html>
|
|
|
|
|
20
|
General Category / EasyUI for jQuery / Re: Does anyone use Easy UI with google maps?(solved)
|
on: April 19, 2013, 08:32:50 AM
|
Here is an example which loads Google Maps, displays a marker, a circle and a polyline. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Maps Test</title>
<link class="jeasycss" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var gmap, locMarker, locCircle, locPath;
var mapDiv = document.getElementById('myMap');
options = {
center: new google.maps.LatLng(-34.8, 138.6),
scaleControl: true,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
navigationControl: true,
disableDoubleClickZoom: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
gmap = new google.maps.Map(mapDiv, options);
gmap.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
]
}
});
locMarker = new google.maps.Marker({
position: new google.maps.LatLng(-34.8, 138.6),
map: gmap,
title: "A marker"
});
locCircle = new google.maps.Circle({
visible: true,
map: gmap,
radius: 5000,
center: new google.maps.LatLng(-34.6, 138.4),
fillColor: '#0055ff',
fillOpacity: 0.2,
strokeColor: '#0055ff',
strokeOpacity: 0.8,
strokeWeight: 1
});
var polyCoordinates = [
new google.maps.LatLng(-34.2, 138.0),
new google.maps.LatLng(-34.4, 138.1),
new google.maps.LatLng(-34.5, 138.3)
];
locPath = new google.maps.Polyline({
path: polyCoordinates,
strokeColor: "#0072BC",
strokeOpacity: 0.8,
strokeWeight: 5
});
locPath.setMap(gmap);
});
</script>
</head>
<body class="easyui-layout" style="font-family:Arial,Trebuchet MS,verdana;">
<div region="north" style="height:42px;">
Some heading, logo and menu
</div>
<div region="center" style="overflow:hidden;">
<div id="L_centerTabs" class="easyui-tabs" fit="true" border="false">
<div id="mapTab" title="My Map" style="padding:1px;overflow:hidden;">
<div id="myMap" style="height:100%">
</div>
</div>
<div id="otherTab" title="Other" style="padding:1px;overflow:hidden;">
Some other tab
</div>
</div>
</div>
</body>
</html>
|
|
|
|
|
22
|
General Category / General Discussion / Re: Dialog from other page
|
on: April 19, 2013, 04:44:39 AM
|
|
My current project has over 2000 lines of HTML (plus another 5000 lines of own JS, plus code from jQuery and jEasyUI). I had the same concerns you were having, but can't say that I notice any speed problems with my current project (other than increased loading time). In my system, I can 'turn off' certain parts of the code (ie they are not loaded in the browser), and I don't see any difference in speed. I'm sure there must be some limit where there will be some issues. Maybe other users could share the sizes of their projects on this thread.
|
|
|
|
|
23
|
General Category / General Discussion / Re: Drag and drop with database update
|
on: April 19, 2013, 04:29:10 AM
|
|
Hi Peter
Using any of the available js frameworks will make your life a lot easy than coding from scratch. I've looked at most of the available frameworks and settled on jeasyui. It really is easy to understand and use. Support and help is excellent by the developer (I did pay for the licence), often having issues solved with hours. Just to give you an example, with little JS experience I managed to develope a complete working vehicle tracking and fleet management platform within 3 months.
|
|
|
|
|
25
|
General Category / Bug Report / Multiline datagrid header only shows one line in 1.3.2
|
on: January 22, 2013, 02:26:12 PM
|
In all previous versions, it was possible to create a multilined datagrid header by just inserting a <br> tag in the title. Multiline headers are extremely helpful if you have many columns with 'long' heading names. Thus splitting them up into 2 lines will technically halve the width of the table. The following code creates a 2 line header in V1.3.1, but you only see the 1st line in V1.3.2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link href="http://www.jeasyui.com/easyui/themes/default/easyui.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#test').datagrid({
fit: true,
columns: [[
{ field: 'col1', title: 'Col 1<br>Next',width: 100},
{ field: 'col2', title: 'Col 2', width: 100}
]]
});
});
</script>
</head>
<body>
<table id="test"></table>
</body>
</html>
This has been tested with IE,FF and Chrome - same results. I've also tried creating the table with HTML which also only displays 1 line in the header. |
|
|
|
|
26
|
General Category / Bug Report / Message Box Position z-index seems to be wrong
|
on: November 17, 2012, 08:54:07 PM
|
I have a layout which has been defined for the whole page. There is a North and Center section. When I try to display a message with a call to $.messager.show, the message is under the North part. Please see the attached example. This is the example of the code used; <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
function topCenter() {
$.messager.show({
title: 'Title',
msg: 'Message',
showType: 'slide',
style: {
right: '',
top: document.body.scrollTop + document.documentElement.scrollTop,
bottom: ''
}
});
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:30px"></div>
<div data-options="region:'center'">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">TopCenter</a>
</div>
</body>
</html>
I get the same error in FF, IE and Chrome. I've also tried using jQuery V1.7.2 with no luck. |
|
|
|
|
27
|
General Category / General Discussion / Re: How to empty a datagrid?
|
on: November 17, 2012, 07:17:54 PM
|
@skellenb There is an easier way (and quicker  ) var rows = $('#tt').datagrid('getSelections'); // get all selected rows for(var i=rows.length-1; i>= 0; i--){ var index = $('#tt').datagrid('getRowIndex',rows .id); // get the row index
$('#tt').datagrid('deleteRow',index);
} |
|
|
|
|
28
|
General Category / General Discussion / Re: pass parameter via $ _POST
|
on: November 17, 2012, 06:51:36 PM
|
I'm no expert, but you could try the following; function print () {
var row = $ ('# dg'). datagrid ('getSelected');
$.post('impress.php?&cCodalu =' + row.codalub,{id:'dummy'},function(result){
if (result.success){
...success processing...
} else {
...failed processing...
}
},'json');
}
|
|
|
|
|
29
|
General Category / Bug Report / SearchBox incorrect width
|
on: October 04, 2012, 05:42:24 AM
|
After upgrading to version 1.3.1 the SearchBox does not apply a width attribute to the INPUT tag. This only occurs when no menu is applied. Running the code below will demonstrate this. The first SearchBox displays correctly (with a menu), the second not (without a menu). This was tested in FF, Chrome and IE. All gave the same results. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SearchBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:function(value,name){alert(value+':'+name)}" style="width:300px"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
<input class="easyui-searchbox" data-options="prompt:'Please Input Value', searcher:function(value,name){alert(value+':'+name)}" style="width:400px"></input>
</body>
</html>
|
|
|
|
|
