Title: Complex Toolbar on Datagrid with javascript declaration
Post by: eagleeye on June 10, 2014, 12:07:17 PM
Hi partner's I need create complex toolbar ( Buttons and DateBox, InputText , search button) the documentation says:
The top toolbar of datagrid panel. Possible values:
1) an array, each tool options are same as linkbutton.
2) a selector that indicate the toolbar.
Define toolbar within a <div> tag:
$('#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>
Define toolbar via array:
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
}]
});
[/i] My declaration is it in Javascript have the datagrid declaration
var edit_mode = false;
var editingIndex;
var tbl = $('#tt');
tbl.datagrid({
width: 780,
height: 285,
url: '../Controllers/c_ejercicio_diario.php?action=READ_EJERCICIO_DIARIO',
singleSelect:true,
toolbar:[
{
text:'Editar',
iconCls:'icon-edit',
handler: function(){
edit_mode = true;
var record = tbl.datagrid('getSelected'); //Renglon seleccionado
var rowIndex = tbl.datagrid("getRowIndex", record);//Indice del renglón seleccionado
if(record){
editRow(rowIndex);
} else{
editRow(0);
}
}
},{
text:'Cambia Fecha',
iconCls:'icon-edit',
handler: function(){
$('#datedlg').dialog('open');
}
}
,
{
text:'Cancela',
iconCls:'icon-cancel',
handler: function(){
edit_mode = false;
tbl.datagrid('endEdit',editingIndex);
}
},
{
text:'Grabar',
iconCls:'icon-save',
handler: function(){
edit_mode = false;
tbl.datagrid('endEdit',editingIndex);
tbl.datagrid('acceptChanges');
saveRecords();
}
}
],
columns:[[
{
field:'id_concepto',
title:'ID',
width:20
},
{
field:'presupuesto_concepto',
title:'Concepto',
width:160
},
{
field:'sociedad',
title:'Sociedad',
width:60
},
{
field:'division',
title:'Division',
width:60
},
{
field:'fecha_previa',
title:'Fecha Previa',
width:80
},
{
field:'importe',
title:'Importe',
width:100,
align:'right',
editor:{
type:'numberbox',
options:{
precision:2,
disabled:true
}
}
},
{
field:'fecha_actual',
title:'Fecha Actual',
width:80,
editor:{
type:'datebox',
options:{
disabled:true
}
}
},
{
field:'importe_actual',
title:'Importe',
width:100,
align:'right',
editor:{
type:'numberbox',
options:{
precision:2,
required: true
}
}
},
{
field:'diferencia',
title:'Diferencia',
width:100,
align:'right',
editor:{
type:'numberbox',
options:{
precision:2,
disabled:true
}
}
}
]],
onSelect:function(index){
editRow(parseInt(index));
}
});
Like this example <div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<div>
Date From: <input class="easyui-datebox" style="width:80px">
To: <input class="easyui-datebox" style="width:80px">
Language:
<select class="easyui-combobox" panelHeight="auto" style="width:100px">
<option value="java">Java</option>
<option value="c">C</option>
<option value="basic">Basic</option>
<option value="perl">Perl</option>
<option value="python">Python</option>
</select>
<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>
Tnx in advance ;D
Title: Re: Complex Toolbar on Datagrid with javascript declaration
Post by: stworthy on June 10, 2014, 06:29:51 PM
You can create the toolbar object programmatically, append any elements, and then attach it to the datagrid. var toolbar = $('<div style="padding:2px 4px"></div>').appendTo('body');
var db = $('<input>').appendTo(toolbar);
db.datebox();
var cb = $('<input>').appendTo(toolbar);
cb.combobox();
$('#dg').datagrid({
toolbar:toolbar
})
Title: Re: Complex Toolbar on Datagrid with javascript declaration
Post by: eagleeye on June 11, 2014, 06:36:00 AM
Thanks stworthy i will test it, have a nice day
|