Show Posts
|
Pages: [1] 2 3
|
6
|
General Category / EasyUI for jQuery / Re: how to make line on group header datagrid
|
on: February 09, 2022, 07:38:18 PM
|
how about the body, my code work on header only var dg = $('#dg6'); dg.datagrid(); var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]'); td.css("border-right","1px solid grey"); var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]'); td1.css("border-right","1px solid grey"); var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]'); td2.css("border-right","1px solid grey");
|
|
|
7
|
General Category / EasyUI for jQuery / Re: how to make line on group header datagrid
|
on: February 09, 2022, 01:42:26 PM
|
here my code,but my problem in td3 is not work as expected var dg = $('#dg6'); dg.datagrid(); var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]'); td.css("border-right","1px solid grey"); var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]'); td1.css("border-right","1px solid grey"); var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]'); td2.css("border-right","1px solid grey"); var td3 = dg.datagrid('getPanel').find('div.datagrid-body td[field="penerima_total"]'); td3.css("border-right","1px solid red");
|
|
|
12
|
General Category / EasyUI for jQuery / (Closed) Datagrid Frozen Column with Merge Cell
|
on: August 09, 2018, 02:16:38 AM
|
Hi, please help to frozen datagrid column with a merge cell code my code is not work for frozen column, i have try to place data-options="frozen:true" at <thead> but result is blank <table class="easyui-datagrid" style="width:100%;height:100%" data-options="rownumbers:false,singleSelect:true,url:'../control/get_data.php',method:'get',onLoadSuccess: onLoadSuccess"> <thead > <tr data-options="frozen:true"> <th data-options="field:'dept',width:135" rowspan="2">Departemen</th> <th data-options="field:'objective_group',width:150" rowspan="2">Objective Group</th> <th data-options="field:'target_group',width:80,align:'center'" formatter="formatPrice" rowspan="2">Target</th> <th data-options="field:'objective',width:300" rowspan="2">Detail Objective</th> <th data-options="field:'unit',width:200,align:'center'" rowspan="2">Unit</th> <th data-options="field:'target_group_detail',width:100,align:'right',frozen:true" formatter="formatPrice" rowspan="2">Target</th> <th colspan="3">Jan</th> <th colspan="3">Feb</th> <th colspan="3">Mar</th> <th colspan="3">Apr</th> <th colspan="3">May</th> <th colspan="3">Jun</th> <th colspan="3">Jul</th> <th colspan="3">Aug</th> <th colspan="3">Sep</th> <th colspan="3">Oct</th> <th colspan="3">Nov</th> <th colspan="3">Dec</th> </tr> </thead> <thead> <tr> <!-- Jan --> <th data-options="field:'T_Jan',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Jan',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Jan',width:50,align:'right'">%</th> <!-- Feb --> <th data-options="field:'T_Feb',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Feb',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Feb',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Mar',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Mar',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Mar',width:50,align:'right'">%</th> <!-- Apr --> <th data-options="field:'T_Apr',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Apr',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Apr',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_May',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_May',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_May',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Jun',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Jun',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Jun',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Jul',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Jul',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Jul',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Aug',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Aug',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Aug',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Sep',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Sep',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Sep',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Oct',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Oct',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Oct',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Nov',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Nov',width:80,align:'right'">Actual</th> <th data-options="field:'P_Nov',width:50,align:'right'">%</th> <!-- Mar --> <th data-options="field:'T_Dec',width:80,align:'right'" formatter="formatPrice">Target</th> <th data-options="field:'A_Dec',width:80,align:'right'" formatter="formatPrice">Actual</th> <th data-options="field:'P_Dec',width:50,align:'right'">%</th> </tr>
</thead> </table> </body> <script type="text/javascript"> function onLoadSuccess(data){ var merges = [{ index: 0, rowspan: 4 },{ index: 4, rowspan: 5 },{ index: 9, rowspan: 4 },{ index: 13, rowspan: 3 }]; var merges1 =[{ index: 0, rowspan: 4 },{ index: 4, rowspan: 5 },{ index: 9, rowspan: 4 },{ index: 13, rowspan: 3 }]; var merges2 =[{ index: 0, rowspan: 4 },{ index: 4, rowspan: 5 },{ index: 9, rowspan: 4 },{ index: 13, rowspan: 3 }];
for(var i=0; i<merges.length; i++){ $(this).datagrid('mergeCells',{ index: merges[i].index, field: 'dept', rowspan: merges[i].rowspan }); } for(var i=0; i<merges1.length; i++){ $(this).datagrid('mergeCells',{ index: merges1[i].index, field: 'objective_group', rowspan: merges1[i].rowspan }); } for(var i=0; i<merges2.length; i++){ $(this).datagrid('mergeCells',{ index: merges2[i].index, field: 'target_group', rowspan: merges2[i].rowspan }); }
} </script>
|
|
|
13
|
General Category / EasyUI for jQuery / Re: datagrid with combogrid as editor keyevent (keypress) detect
|
on: April 17, 2018, 12:51:15 PM
|
Closed <html> <head> <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <link rel="stylesheet" type="text/css" href="../themes/color.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.edatagrid.js"></script> <link rel="stylesheet" href="../css/w3.css"> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var t = $(ed1.target).combogrid('textbox').focus(); t.focus(); }, onBeginEdit:function(index){ var ed1 = $(this).edatagrid('getEditor',{index:index,field:'pcn'}); var ed2 = $(this).edatagrid('getEditor',{index:index,field:'unit'}); var ed3 = $(this).edatagrid('getEditor',{index:index,field:'qty'}); setKeydown([ed1.target,ed3.target]); } });
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) { var keyCode = e.keyCode; if(keyCode==78) { //alert("You hit the enter key."); var dg = $('#dg'); dg.edatagrid('addRow'); var index = dg.edatagrid('getRows').length-1; // the editing row index var ed = dg.edatagrid('getEditors', index)[0]; // get the first editor $(ed.target).focus(); } else if (keyCode==67) { //alert (keyCode); //alert("Oh no you didn't."); $('#dg').edatagrid('cancelRow'); }else{ //alert(keyCode); } } }); </script> <style> .w3-button {width:100px;height:30px;} </style>
</head> <body> <table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true"> <thead> <tr> <th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[ {field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
onSelect: onSelectGrid, onShowPanel: onShowPanel,onHidePanel: onHidePanel,onChange: onChange,
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:true}}">Unit</th> <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr> </thead> </table> <div align="right" style="margin:10 0 0"> <a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a> </div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
<script> function onShowPanel() { cbg = $(this); } function onHidePanel() { cbg = null; } function onSelectGrid(index,record) { if(cbg) { var cb = cbg; var opts =cb.combogrid('options'); var grid = cb.combogrid('grid'); var row= grid.datagrid('getSelected'); // alert (row.price); var dgs = $('#dg'); var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
var editors = dgs.datagrid('getEditors', index); $(editors[1].target).val(row.unit);
} } function onChange(newValue, oldValue) { if(cbg) { var opts = cbg.combogrid('options'); grid=cbg.combogrid('grid'); var row= grid.datagrid('getSelected'); var dgs = $('#dg'); var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
var editors = dgs.datagrid('getEditors', index); $(editors[1].target).val(row.unit); } } function setKeydown(tt){ for(var i=0; i<tt.length; i++){ var t = tt[i]; getInputBox(t).bind('keydown',{i:i},function(e){ if (e.keyCode == 13){ var next = getInputBox(tt[e.data.i+1]||tt[0]); next.focus(); } }); } } function getInputBox(target){ return $(target).data('textbox') ? $(target).textbox('textbox') : $(target); } </script> </body> </head>
|
|
|
14
|
General Category / EasyUI for jQuery / keyhandler combogrid as datagrid editor
|
on: April 17, 2018, 11:06:13 AM
|
Hi i face problem with keyhandler in combogrid as datagrid editor, i need to detect enter key in combogrid. here my code <html> <head> <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <link rel="stylesheet" type="text/css" href="../themes/color.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.edatagrid.js"></script> <link rel="stylesheet" href="../css/w3.css"> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var t = $(ed1.target).combogrid('textbox').focus(); t.focus(); } });
}); </script> <style> .w3-button {width:100px;height:30px;} </style>
</head> <body> <table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true"> <thead> <tr> <th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[ {field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
keyHandler: $.extend({}, $.fn.combogrid.defaults.keyHandler, { enter: function(e){ //... } })
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th> <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr> </thead> </table> <div align="right" style="margin:10 0 0"> <a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a> </div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
</body> </head>
|
|
|
15
|
General Category / EasyUI for jQuery / Re: Set Focus in edatagrid editor when click add New Row
|
on: April 17, 2018, 10:50:31 AM
|
Finally Find solution: <html> <head> <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <link rel="stylesheet" type="text/css" href="../themes/color.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.edatagrid.js"></script> <link rel="stylesheet" href="../css/w3.css"> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); //$(ed1.target).focus(); var t = $(ed1.target).combogrid('textbox').focus(); t.focus(); } }); }); </script> <style> .w3-button {width:100px;height:30px;} </style>
</head> <body> <table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true"> <thead> <tr> <th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[ {field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th> <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr> </thead> </table> <div align="right" style="margin:10 0 0"> <a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a> </div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
</body> </head>
|
|
|
|