 Show Posts
|
|
Pages: [1]
|
|
1
|
General Category / EasyUI for jQuery / Re: Datagrid: Set a Column editable
|
on: March 18, 2014, 11:37:07 PM
|
|
Yes i want achieve cell editing, although not for a single field, but for the whole column.
lets say the datagrid has columns 1 to 5.
I want col 3 and 4 to be editable, with a input field in every single rows.
But the editor should not just appear when clicking a button or in a cell, the editors should be ready at the start, for the whole column.
|
|
|
|
|
2
|
General Category / EasyUI for jQuery / Datagrid: Set a Column editable
|
on: March 18, 2014, 08:47:01 AM
|
|
Hi all,
i want to have a datagrid, with two columns in which every field is editable.
I just find examples about editing rows, but not columns.
How would i do this?
And is there a option, to set a validator to all the fields ( like field 1 is lesser then field 2 ), so if I click a save button, the validator is fired an every row will be validated on it's own.
Thanks.
|
|
|
|
|
5
|
General Category / EasyUI for jQuery / Sorting in Datagrid
|
on: March 07, 2014, 03:10:14 AM
|
Hi all, when i enable the sorting in my datagrid, nothing happens, when i click the sortable column. Do i have to implent the sort on my own? <script>
$(function(){
$('#Disp_Tolerances_grid').datagrid({
singleSelect:false,
idField:'FLEV',
data: my_disp_tol,
columns:[[
{field:'FLEV',title:'Filter Level',rowspan:2,width:62},
{title:'Global Data',colspan:2},
{title:'OD Data',colspan:2},
{field:'USER',title:'User',rowspan:2,width:100},
{field:'DATE',title:'Date',rowspan:2,width:115}
],[
{field:'FROMGL',title:'From',width:70,[b]sortable:true[/b]},
{field:'TOGL',title:'To',width:70},
{field:'FROMOD',title:'From',width:70},
{field:'TOOD',title:'To',width:70}
]]
});
});
</script>
<table id="Disp_Tolerances_grid" ></table>
|
|
|
|
|
7
|
General Category / EasyUI for jQuery / Panel resize when browser window size changes
|
on: March 07, 2014, 01:20:44 AM
|
Hi all, i have the following panel: <body>
<div id="p" class="easyui-panel" title="My Panel" data-options="collapsible:true">
<p>Panel Content.</p>
<p>Panel Content.</p>
<p>Panel Content.</p>
</div>
<p>asdasdasdasda</p>
<p>Padasdadasdadasd</p>
</body>
When i now open the browser everything is fine and it fits perfectly The Problem is, when i resize the browser window, the panel just don't resize. see images small and big.jpg What can i do the resize that panel? The Problem is inside the panel: When it's generated it appears like this: <div class="panel" style="width: auto; display: block;"> <div class="panel-header" style="width: 517px;"> <div title="" class="easyui-panel panel-body" id="p" style="width: 527px; height: auto;" data-options="collapsible:true"> </div> If it would be possible to change this to width:auto it would work. But i can't figure it out? Any help, thanks. |
|
|
|
|
8
|
General Category / EasyUI for jQuery / Re: Simple implementation of Row Editing in DataGrid
|
on: March 04, 2014, 04:17:55 AM
|
sorry can't open your link, but u should do the following like in examples: for the content of your combobox:
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
for defining the datagrid.
$(function(){
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
url:'data/datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
formatter:function(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:products,
required:true
}
}
}, .....
as you can see it uses the products json as data for the combo. This works fine with me. you find the example right here: http://www.jeasyui.com/tutorial/datagrid/datagrid12.php |
|
|
|
|
9
|
General Category / EasyUI for jQuery / Re: how can have more than one feild
|
on: March 04, 2014, 04:10:38 AM
|
you can find your answer right in the docu: <table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>
|
|
|
|
|
10
|
General Category / EasyUI for jQuery / Editable Datagrid with Validators
|
on: March 04, 2014, 04:00:01 AM
|
Hi Experts, how would you manage it, to get a editable datagrid with fields "from" and "to", which both should a validator like "from" must be less equal to field "to" I did the following: $.extend($.fn.validatebox.defaults.rules, {
$.extend($.fn.validatebox.defaults.rules, {
from: {
validator: function(value, param){
var ed1 = $('#Tolerances_grid').datagrid('getEditor', {index:my_single_update_index,field:'TO'});
var to_value = $(ed1.target).val()
return to_value >= value;
},
message: 'From must be lesser than or equals To.'
},
to: {
validator: function(value, param){
var ed2 = $('#Tolerances_grid').datagrid('getEditor', {index:my_single_update_index,field:'FROM'});
var from_value = $(ed2.target).val()
return from_value <= value;
},
message: 'To must be greater than or equals From.'
}
});
And here is the field defintion: {field:'FROM',title:'From',width:70, editor:{
type:"validatebox",
options:{
validType:"from[]"
}
}},
{field:'TO',title:'To',width:70, editor:{
type:"validatebox",
options:{
validType:"to[]"
}
}},
The code is working fine, but I think it can be much easier, with a row validator perhaps? If yes, can u give me simple example ? And i don't like this lines here: var ed2 = $('#Tolerances_grid').datagrid('getEditor', {index:my_single_update_index,field:'FROM'});
var from_value = $(ed2.target).val()
I wonder, why i can't use the action getValue() from the editor to get value? Any ideas? Thanks. |
|
|
|
|
11
|
General Category / EasyUI for jQuery / Re: Hope there is an option for combobox to show checkbox
|
on: November 15, 2013, 08:05:35 AM
|
Hi, you can easy achieve this with the normal combo like that: <select id="cc2" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
<input type="checkbox" name="lang" value="01"><span>Java</span><br/>
<input type="checkbox" name="lang" value="02"><span>C#</span><br/>
<input type="checkbox" name="lang" value="03"><span>Ruby</span><br/>
<input type="checkbox" name="lang" value="04"><span>Basic</span><br/>
<input type="checkbox" name="lang" value="05"><span>Fortran</span>
</div>
$('#cc2').combo({
required:true,
editable:false,
multiple:true
});
$('#sp').appendTo($('#cc2').combo('panel'));
$('#sp input').click(function(){
var my_text = '';
var my_val = '';
$('#sp input').each(function(){
if ($(this).is(":checked")) {
var v = $(this).val();
var s = $(this).next('span').text();
my_text == '' ? my_text = s : my_text += ','+s;
my_val == '' ? my_val = v : my_val += ','+v;
}
});
$('#cc2').combo('setValue', my_val).combo('setText', my_text);
});
|
|
|
|
|
13
|
General Category / EasyUI for jQuery / Enhance Multiple Combotree with header Panel
|
on: November 08, 2013, 06:51:23 AM
|
Hi everybody, i did the following: var my_panel = $('#cc').combo('panel');
$( my_panel ).panel({
title:'My Panel',
tools:[{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
which leads to this result:  see attached image is it possible to get the icons working? Cause if i click one of those icons, nothing happens and the tree gets closed, instead of showing me the alert message. |
|
|
|
|
14
|
General Category / EasyUI for jQuery / Combotree without using JSON
|
on: November 04, 2013, 06:54:06 AM
|
Hi everybody, ist there a way to use the combotree with multiple select, without using JSON? <select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'myjosnfile',required:true">
</select> I would like to use this, with some fixed strucutre of <ul><li> inside the HTML, but i can't manage it getting the data out of the UL LI structure. Thanks. Update: It got it running that way: Even the getChecked is working :-) <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script>
$(document).ready(function() {
$('#cc').combotree('loadData', [{
id: 1,
text: 'Level1',
children: [{
id: 11,
text: 'Level2a',
children: [{
id: 21,
text: 'Level3a'
}, {
id: 22,
text: 'Level3b'
}]
},{
id: 12,
text: 'Level2b'
}]
}]); required: true
});
</script>
</head>
<body>
<span>Select:</span>
<select id="cc" class="easyui-combotree" style="width:150px;" multiple="true" onlyLeafCheck="true"></select>
<a href="javascript:void(0)" onclick="getChecked()">GetChecked</a>
<script>
function getChecked(){
var nodes = $('#cc').combotree('tree');
var mytree = nodes.tree('getChecked');
var s = '';
var s = '';
for(var i=0; i<mytree.length; i++){
if (s != '') s += ',';
s += mytree[i].text;
s += mytree[i].id;
}
alert(s);
}
</script>
</body>
</html>
|
|
|
|
|
