EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: neos on March 13, 2014, 06:54:26 PM


Title: [SOLVED] datagrid filter not appear in datagrid scrollview
Post by: neos on March 13, 2014, 06:54:26 PM
Dear All,

I try to combine easyui-datagrid scroll view with onclickcell and datagrid-filter.
if i combine easyui-datagrid scroll view with onclickcell it's success. but when i add datagrid-filter, the filter row cannot appear in datagrid.
i use Codeigniter to develop the web..
code for model
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Pickinglist_model extends CI_Model
{    
    public function __construct() {
        parent::__construct();
    }

    public function getJson()
    {
        $page   = isset($_POST['page']) ? intval($_POST['page']) : 1;
        $rows   = isset($_POST['rows']) ? intval($_POST['rows']) : 50;        
        $sort   = isset($_POST['sort']) ? strval($_POST['sort']) : 'id';
        $order  = isset($_POST['order']) ? strval($_POST['order']) : 'asc';        
        $offset = ($page-1)*$rows;

        $this->db->order_by($sort, $order);
        $this->db->limit($rows, $offset);
        $query  = $this->db->get('wmsordertrans');
                   
        $result = array();
        foreach ( $query->result() as $row )
        {
            array_push($result, $row); 
        }
        return json_encode($result);        
    }
public function update2($id)
    {    
        $this->db->where('id', $id);
        return $this->db->update('wmsordertrans',array(            
            'actual_qty'=>$this->input->post('actual_qty',true),
            'box'       =>$this->input->post('box',true),
            'lot'       =>$this->input->post('lot',true),
            'urgent'    =>$this->input->post('urgent',true),
            'no_stock'  =>$this->input->post('no_stock',true),
            'close'     =>$this->input->post('close',true)
        ));
    }
}

code for controller
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Pickinglist extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('master/pickinglist_model','record');
    }
    
    public function index()
    {
        $auth       = new Auth();
         // mencegah user yang belum login untuk mengakses halaman ini
        $auth->restrict();
        
        if (isset($_GET['grid'])) 
            echo $this->record->getJson();        
         else 
            $this->load->view('master/pickinglist');        
    }
public function update2()
    {
        if(!isset($_POST))	
            show_404();
        
        $id = intval(addslashes($_POST['id']));
        $actual_qty = addslashes($_POST['actual_qty']);
        $box        = addslashes($_POST['box']);
        $lot        = addslashes($_POST['lot']);
        $urgent     = addslashes($_POST['urgent']);
        $no_stock   = addslashes($_POST['no_stock']);
        $close      = addslashes($_POST['close']);
        
        if($this->record->update2($id))
            echo json_encode(array('success'=>true));
        else
            echo json_encode(array('msg'=>'Gagal menghapus data'));
    }
    
            
}

code for view
Code:
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>

<script type="text/javascript" src="<?=base_url('assets/easyui/datagrid-scrollview.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/easyui/datagrid-filter.js')?>"></script>
<script type="text/javascript">
    $(function(){
        var dg = $('#master-pickinglist').datagrid({
            filterBtnIconCls:'icon-filter',
            remoteFilter:true
        });        
        dg.datagrid('enableFilter', [{
            field:'actual_qty',
            type:'numberbox',
            options:{precision:1},
            op:['equal','notequal','less','greater']
        }]);
    });
</script>

<style type="text/css">
    .datagrid-cell{        
        font-size:14px;
    }
</style>

<!-- Data Grid -->
<table id="master-pickinglist" class="easyui-datagrid" 
    data-options="view:scrollview, pageSize:50, url:'<?php echo site_url('master/pickinglist/index'); ?>?grid=true',
    onClickCell:onClickCell, singleSelect:true, fit:true, fitColumns:false">
    <thead>
        <tr>              
            <th data-options="field:'id'"                   width="30" align="center" sortable="true">ID</th>
            <th data-options="field:'activation_date'"      width="110" align="center" sortable="true">activation_date</th>
            <th data-options="field:'picking_route'"        width="70" align="center" sortable="true">picking_route</th>
            <th data-options="field:'customer_requisition'" width="100" align="center" sortable="true">customer_requisition</th>
            <th data-options="field:'customer_account'"     width="50" align="center" sortable="true">customer_account</th>
            <th data-options="field:'name'"                 width="300" align="center" sortable="true">Nama Customer</th>
            <th data-options="field:'delivery_date'"        width="80" align="center" sortable="true">delivery_date</th>
            <th data-options="field:'item_number'"          width="80" align="center" sortable="true">item_number</th>
            <th data-options="field:'item_name'"            width="200" align="center" sortable="true">item_name</th>
            <th data-options="field:'external'"             width="100" align="center" sortable="true">external</th>
            <th data-options="field:'ca_number'"            width="100" align="center" sortable="true">ca_number</th>
            <th data-options="field:'quantity'"  formatter="qty"            width="80" align="center" sortable="true">quantity</th>
            <th data-options="field:'actual_qty'" formatter="act" editor="numberbox"          width="80" align="center" sortable="true">actual_qty</th>
            <th data-options="field:'box'" editor="numberbox"                 width="100" align="center" sortable="true">box</th>
            <th data-options="field:'lot'" editor="text"    width="80" align="center" sortable="true">lot</th>
            <th data-options="field:'urgent'" editor="{type:'checkbox',options:{on:'URGENT',off:''}}"              width="80" align="center" sortable="true">urgent</th>
            <th data-options="field:'no_stock'" styler="noStock" editor="{type:'checkbox',options:{on:'NO STOK',off:''}}"            width="100" align="center" sortable="true">no_stock</th>
            <th data-options="field:'close'" styler="close" editor="{type:'checkbox',options:{on:'CLOSE',off:''}}"            width="100" align="center" sortable="true">close</th>
            <th data-options="field:'upload_time'"          width="80" align="center" sortable="true">upload_time</th>            
        </tr>
    </thead>
</table>

<script type="text/javascript">
    $('#master-pickinglist').datagrid({
        rowStyler:function(index,row){
            if (row.urgent == 'URGENT'){
                return 'background-color:#990012;color:#fff;font-weight:bold;height:50px;';
            } else {
                return 'height:50px;font-weight:bold;';
            }
        }
    });
    
    $.extend($.fn.datagrid.methods, {
        editCell: function(jq,param){
            return jq.each(function(){
                var opts = $(this).datagrid('options');
                var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field){
                        col.editor = null;
                    }
                }
                $(this).datagrid('beginEdit', param.index);
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });

    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#master-pickinglist').datagrid('validateRow', editIndex)){
            $('#master-pickinglist').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field){             
        if (endEditing()){
            var row = $('#master-pickinglist').datagrid('getSelected'); //tambahan
            if (row){
                $('#master-pickinglist').datagrid('selectRow', index)
                .datagrid('editCell', {index:index,field:field});
                editIndex = index;
                $.post('<?php echo site_url('master/pickinglist/update2'); ?>',
                {id:row.id, actual_qty:row.actual_qty, box:row.box, lot:row.lot, 
                urgent:row.urgent, no_stock:row.no_stock, close:row.close},'json');
                //alert('index ='+index + 'id ='+row.id); //debug                
            }
        }
    }
    
    function close(value,row,index){
        if (value == 'CLOSE'){
            return 'background-color:#00FF00;color:black;font-weight:bold;';
        }
    }
    
    function noStock(value,row,index){
        if (value == 'NO STOK'){
            return 'background-color:#FFFF00;color:black;font-weight:bold;';
        }
    }
    
    function qty(value,row,index) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }
    
    function act(value,row,index) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }
    
</script>


        
<!-- Toolbar -->


<!-- Dialog Form -->


<!-- Dialog Button -->


where's wrong ?

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: stworthy on March 13, 2014, 07:28:04 PM
If the filter toolbar does not appear, please try to call 'resize' method again.
Code:
$('#dg').datagrid('enableFilter');
$('#dg').datagrid('resize');

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: neos on March 13, 2014, 07:48:19 PM
I was add resize but the filter row still dont appear
Code:
$(function(){
        var dg = $('#master-pickinglist').datagrid({
            filterBtnIconCls:'icon-filter',
            remoteFilter:true
        });        
        dg.datagrid('enableFilter', [{
            field:'actual_qty',
            type:'numberbox',
            options:{precision:1},
            op:['equal','notequal','less','greater']
        }]);
        dg.datagrid('resize');
    });

if I misplaced the code ?
i'm so confused  ???

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: stworthy on March 14, 2014, 03:47:01 AM
Quote from: neos on March 13, 2014, 07:48:19 PM
I was add resize but the filter row still dont appear
Code:
$(function(){
        var dg = $('#master-pickinglist').datagrid({
            filterBtnIconCls:'icon-filter',
            remoteFilter:true
        });        
        dg.datagrid('enableFilter', [{
            field:'actual_qty',
            type:'numberbox',
            options:{precision:1},
            op:['equal','notequal','less','greater']
        }]);
        dg.datagrid('resize');
    });

if I misplaced the code ?
i'm so confused  ???

Please try to move these code to the bottom of page.

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: neos on March 14, 2014, 02:14:45 PM
I was move the code but still not appear.
have another advice ?  ???

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: stworthy on March 16, 2014, 08:14:59 PM
Please refer to this example http://jsfiddle.net/RXZLc/.

Title: Re: datagrid filter not appear in datagrid scrollview
Post by: neos on March 20, 2014, 04:10:46 AM
thx stworthy works like a charm..


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines