Ordem Alfabética de tabela puxada do banco de dados.

[Daniel Ferreira Carneiro 0]

Olá Bom Dia, 

 

quem puder me ajude com esse problema, Criei uma banco de dados SQL tem mais ou menos 160 dados, após peguei um datagrid easyui e importei os dados do banco de dados pra galera cadastrar seus dados na tabela, pois a mesma é uma lista, oque acontece ? EU NÃO SEI COMO EXIBIR A PÁGINA COM OS DADOS DO BANCO EM ORDEM ALFABÉTICA, no PHPMyAdmin eu coloquei em ordem, mais na página conforme a galera cadastra vai desordenando..

 

Poderiam me ajudar com relação a isso ? onde eu posso colocar e onde eu insiro algum código.

 

abaixo eu vou colocar a pagina html e o datagrid se alguém quiser ver e incrementar algo:

 

DATAGRID

Spoiler

DATAGRID

 

 

/**
 * edatagrid - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2011 stworthy [ stworthy@gmail.com ] 
 * 
 * Dependencies:
 *   datagrid
 *   messager
 * 
 */
(function($){
    var currTarget;
    $(function(){
        $(document).unbind('.edatagrid').bind('mousedown.edatagrid', function(e){
            var p = $(e.target).closest('div.datagrid-view,div.combo-panel');
            if (p.length){
                if (p.hasClass('datagrid-view')){
                    var dg = p.children('table');
                    if (dg.length && currTarget != dg[0]){
                        _save();
                    }
                }
                return;
            }
            _save();
            
            function _save(){
                var dg = $(currTarget);
                if (dg.length){
                    dg.edatagrid('saveRow');
                    currTarget = undefined;
                }
            }
        });
    });
    
    function buildGrid(target){
        var opts = $.data(target, 'edatagrid').options;
        $(target).datagrid($.extend({}, opts, {
            onDblClickCell:function(index,field,value){
                if (opts.editing){
                    $(this).edatagrid('editRow', index);
                    focusEditor(field);
                }
                if (opts.onDblClickCell){
                    opts.onDblClickCell.call(target, index, field, value);
                }
            },
            onClickCell:function(index,field,value){
                if (opts.editing && opts.editIndex >= 0){
                    $(this).edatagrid('editRow', index);
                    focusEditor(field);
                }
                if (opts.onClickCell){
                    opts.onClickCell.call(target, index, field, value);
                }
            },
            onAfterEdit: function(index, row){
                opts.editIndex = -1;
                var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
                if (url){
                    $.post(url, row, function(data){
                        if (data.isError){
                            $(target).edatagrid('cancelRow',index);
                            $(target).edatagrid('selectRow',index);
                            $(target).edatagrid('editRow',index);
                            opts.onError.call(target, index, data);
                            return;
                        }
                        data.isNewRecord = null;
                        $(target).datagrid('updateRow', {
                            index: index,
                            row: data
                        });
                        if (opts.tree){
                            var idValue = row[opts.idField||'id'];
                            var t = $(opts.tree);
                            var node = t.tree('find', idValue);
                            if (node){
                                node.text = row[opts.treeTextField];
                                t.tree('update', node);
                            } else {
                                var pnode = t.tree('find', row[opts.treeParentField]);
                                t.tree('append', {
                                    parent: (pnode ? pnode.target : null),
                                    data: [{id:idValue,text:row[opts.treeTextField]}]
                                });
                            }
                        }
                        opts.onSave.call(target, index, row);
                    },'json');
                } else {
                    opts.onSave.call(target, index, row);
                }
                if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);
            },
            onCancelEdit: function(index, row){
                opts.editIndex = -1;
                if (row.isNewRecord) {
                    $(this).datagrid('deleteRow', index);
                }
                if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);
            },
            onBeforeLoad: function(param){
                if (opts.onBeforeLoad.call(target, param) == false){return false}
//                $(this).datagrid('rejectChanges');
                $(this).edatagrid('cancelRow');
                if (opts.tree){
                    var node = $(opts.tree).tree('getSelected');
                    param[opts.treeParentField] = node ? node.id : undefined;
                }
            }
        }));
        
        
        function focusEditor(field){
            var editor = $(target).datagrid('getEditor', {index:opts.editIndex,field:field});
            if (editor){
                editor.target.focus();
            } else {
                var editors = $(target).datagrid('getEditors', opts.editIndex);
                if (editors.length){
                    editors[0].target.focus();
                }
            }
        }
        
        if (opts.tree){
            $(opts.tree).tree({
                url: opts.treeUrl,
                onClick: function(node){
                    $(target).datagrid('load');
                },
                onDrop: function(dest,source,point){
                    var targetId = $(this).tree('getNode', dest).id;
                    $.ajax({
                        url: opts.treeDndUrl,
                        type:'post',
                        data:{
                            id:source.id,
                            targetId:targetId,
                            point:point
                        },
                        dataType:'json',
                        success:function(){
                            $(target).datagrid('load');
                        }
                    });
                }
            });
        }
    }
    
    $.fn.edatagrid = function(options, param){
        if (typeof options == 'string'){
            var method = $.fn.edatagrid.methods[options];
            if (method){
                return method(this, param);
            } else {
                return this.datagrid(options, param);
            }
        }
        
        options = options || {};
        return this.each(function(){
            var state = $.data(this, 'edatagrid');
            if (state){
                $.extend(state.options, options);
            } else {
                $.data(this, 'edatagrid', {
                    options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
                });
            }
            buildGrid(this);
        });
    };
    
    $.fn.edatagrid.parseOptions = function(target){
        return $.extend({}, $.fn.datagrid.parseOptions(target), {
        });
    };
    
    $.fn.edatagrid.methods = {
        options: function(jq){
            var opts = $.data(jq[0], 'edatagrid').options;
            return opts;
        },
        enableEditing: function(jq){
            return jq.each(function(){
                var opts = $.data(this, 'edatagrid').options;
                opts.editing = true;
            });
        },
        disableEditing: function(jq){
            return jq.each(function(){
                var opts = $.data(this, 'edatagrid').options;
                opts.editing = false;
            });
        },
        editRow: function(jq, index){
            return jq.each(function(){
                var dg = $(this);
                var opts = $.data(this, 'edatagrid').options;
                var editIndex = opts.editIndex;
                if (editIndex != index){
                    if (dg.datagrid('validateRow', editIndex)){
                        if (editIndex>=0){
                            if (opts.onBeforeSave.call(this, editIndex) == false) {
                                setTimeout(function(){
                                    dg.datagrid('selectRow', editIndex);
                                },0);
                                return;
                            }
                        }
                        dg.datagrid('endEdit', editIndex);
                        dg.datagrid('beginEdit', index);
                        opts.editIndex = index;
                        
                        if (currTarget != this && $(currTarget).length){
                            $(currTarget).edatagrid('saveRow');
                            currTarget = undefined;
                        }
                        if (opts.autoSave){
                            currTarget = this;
                        }
                        
                        var rows = dg.datagrid('getRows');
                        opts.onEdit.call(this, index, rows[index]);
                    } else {
                        setTimeout(function(){
                            dg.datagrid('selectRow', editIndex);
                        }, 0);
                    }
                }
            });
        },
        addRow: function(jq, index){
            return jq.each(function(){
                var dg = $(this);
                var opts = $.data(this, 'edatagrid').options;
                if (opts.editIndex >= 0){
                    if (!dg.datagrid('validateRow', opts.editIndex)){
                        dg.datagrid('selectRow', opts.editIndex);
                        return;
                    }
                    if (opts.onBeforeSave.call(this, opts.editIndex) == false){
                        setTimeout(function(){
                            dg.datagrid('selectRow', opts.editIndex);
                        },0);
                        return;
                    }
                    dg.datagrid('endEdit', opts.editIndex);
                }
                var rows = dg.datagrid('getRows');
                
                function _add(index, row){
                    if (index == undefined){
                        dg.datagrid('appendRow', row);
                        opts.editIndex = rows.length - 1;
                    } else {
                        dg.datagrid('insertRow', {index:index,row:row});
                        opts.editIndex = index;
                    }
                }
                if (typeof index == 'object'){
                    _add(index.index, $.extend(index.row, {isNewRecord:true}))
                } else {
                    _add(index, {isNewRecord:true});
                }
                
//                if (index == undefined){
//                    dg.datagrid('appendRow', {isNewRecord:true});
//                    opts.editIndex = rows.length - 1;
//                } else {
//                    dg.datagrid('insertRow', {
//                        index: index,
//                        row: {isNewRecord:true}
//                    });
//                    opts.editIndex = index;
//                }
                
                dg.datagrid('beginEdit', opts.editIndex);
                dg.datagrid('selectRow', opts.editIndex);
                
                if (opts.tree){
                    var node = $(opts.tree).tree('getSelected');
                    rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0);
                }
                
                opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]);
            });
        },
        saveRow: function(jq){
            return jq.each(function(){
                var dg = $(this);
                var opts = $.data(this, 'edatagrid').options;
                if (opts.editIndex >= 0){
                    if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
                        setTimeout(function(){
                            dg.datagrid('selectRow', opts.editIndex);
                        },0);
                        return;
                    }
                    $(this).datagrid('endEdit', opts.editIndex);
                }
            });
        },
        cancelRow: function(jq){
            return jq.each(function(){
                var opts = $.data(this, 'edatagrid').options;
                if (opts.editIndex >= 0){
                    $(this).datagrid('cancelEdit', opts.editIndex);
                }
            });
        },
        destroyRow: function(jq, index){
            return jq.each(function(){
                var dg = $(this);
                var opts = $.data(this, 'edatagrid').options;
                
                var rows = [];
                if (index == undefined){
                    rows = dg.datagrid('getSelections');
                } else {
                    var rowIndexes = $.isArray(index) ? index : [index];
                    for(var i=0; i<rowIndexes.length; i++){
                        var row = opts.finder.getRow(this, rowIndexes);
                        if (row){
                            rows.push(row);
                        }
                    }
                }
                
                if (!rows.length){
                    $.messager.show({
                        title: opts.destroyMsg.norecord.title,
                        msg: opts.destroyMsg.norecord.msg
                    });
                    return;
                }
                
                $.messager.confirm(opts.destroyMsg.confirm.title,opts.destroyMsg.confirm.msg,function(r){
                    if (r){
                        for(var i=0; i<rows.length; i++){
                            _del(rows);
                        }
                        dg.datagrid('clearSelections');
                    }
                });
                
                function _del(row){
                    var index = dg.datagrid('getRowIndex', row);
                    if (index == -1){return}
                    if (row.isNewRecord){
                        dg.datagrid('cancelEdit', index);
                    } else {
                        if (opts.destroyUrl){
                            var idValue = row[opts.idField||'id'];
                            $.post(opts.destroyUrl, {id:idValue}, function(data){
                                var index = dg.datagrid('getRowIndex', idValue);
                                if (data.isError){
                                    dg.datagrid('selectRow', index);
                                    opts.onError.call(dg[0], index, data);
                                    return;
                                }
                                if (opts.tree){
                                    dg.datagrid('reload');
                                    var t = $(opts.tree);
                                    var node = t.tree('find', idValue);
                                    if (node){
                                        t.tree('remove', node.target);
                                    }
                                } else {
                                    dg.datagrid('cancelEdit', index);
                                    dg.datagrid('deleteRow', index);
                                }
                                opts.onDestroy.call(dg[0], index, row);
                            }, 'json');
                        } else {
                            dg.datagrid('cancelEdit', index);
                            dg.datagrid('deleteRow', index);
                            opts.onDestroy.call(dg[0], index, row);
                        }
                    }
                }
            });
        }
    };
    
    $.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
        editing: true,
        editIndex: -1,
        destroyMsg:{
            norecord:{
                title:'Atenção',
                msg:'Nenhum dado selecionado.'
            },
            confirm:{
                title:'Confirmar',
                msg:'Tem certeza que deseja apagar o ramal?'
            }
        },
//        destroyConfirmTitle: 'Confirm',
//        destroyConfirmMsg: 'Are you sure you want to delete?',
        
        autoSave: false,    // auto save the editing row when click out of datagrid
        url: null,    // return the datagrid data
        saveUrl: null,    // return the added row
        updateUrl: null,    // return the updated row
        destroyUrl: null,    // return {success:true}
        
        tree: null,        // the tree selector
        treeUrl: null,    // return tree data
        treeDndUrl: null,    // to process the drag and drop operation, return {success:true}
        treeTextField: 'name',
        treeParentField: 'parentId',
        
        onAdd: function(index, row){},
        onEdit: function(index, row){},
        onBeforeSave: function(index){},
        onSave: function(index, row){},
        onDestroy: function(index, row){},
        onError: function(index, row){}
    });
    
    ////////////////////////////////
    $.parser.plugins.push('edatagrid');
})(jQuery);

 

DATAGRID FILTER

Spoiler

DATAGRID FILTER

 

(function($){
    function getPluginName(target){
        if ($(target).data('treegrid')){
            return 'treegrid';
        } else {
            return 'datagrid';
        }
    }
    
    var oldLoadDataMethod = $.fn.datagrid.methods.loadData;
    $.fn.datagrid.methods.loadData = function(jq, data){
        jq.each(function(){
            $.data(this, 'datagrid').filterSource = null;
        });
        return oldLoadDataMethod.call($.fn.datagrid.methods, jq, data);
    };
    
    var extendedOptions = {
        filterMenuIconCls: 'icon-ok',
        filterBtnIconCls: 'icon-filter',
        filterBtnPosition: 'right',
        filterPosition: 'bottom',
        remoteFilter: false,
        filterDelay: 400,
        filterRules: [],
        filterStringify: function(data){
            return JSON.stringify(data);
        },
        onClickMenu: function(item,button){}
    };
    $.extend($.fn.datagrid.defaults, extendedOptions);
    $.extend($.fn.treegrid.defaults, extendedOptions);
    
    // filter types
    $.fn.datagrid.defaults.filters = $.extend({}, $.fn.datagrid.defaults.editors, {
        label: {
            init: function(container, options){
                return $('<span></span>').appendTo(container);
            },
            getValue: function(target){
                return $(target).html();
            },
            setValue: function(target, value){
                $(target).html(value);
            },
            resize: function(target, width){
                $(target)._outerWidth(width)._outerHeight(22);
            }
        }
    });
    $.fn.treegrid.defaults.filters = $.fn.datagrid.defaults.filters;
    
    // filter operators
    $.fn.datagrid.defaults.operators = {
        nofilter: {
            text: 'No Filter'
        },
        contains: {
            text: 'Contains',
            isMatch: function(source, value){
                return source.toLowerCase().indexOf(value.toLowerCase()) >= 0;
            }
        },
        equal: {
            text: 'Equal',
            isMatch: function(source, value){
                return source == value;
            }
        },
        notequal: {
            text: 'Not Equal',
            isMatch: function(source, value){
                return source != value;
            }
        },
        beginwith: {
            text: 'Begin With',
            isMatch: function(source, value){
                return source.toLowerCase().indexOf(value.toLowerCase()) == 0;
            }
        },
        endwith: {
            text: 'End With',
            isMatch: function(source, value){
                return source.toLowerCase().indexOf(value.toLowerCase(), source.length - value.length) !== -1;
            }
        },
        less: {
            text: 'Less',
            isMatch: function(source, value){
                return source < value;
            }
        },
        lessorequal: {
            text: 'Less Or Equal',
            isMatch: function(source, value){
                return source <= value;
            }
        },
        greater: {
            text: 'Greater',
            isMatch: function(source, value){
                return source > value;
            }
        },
        greaterorequal: {
            text: 'Greater Or Equal',
            isMatch: function(source, value){
                return source >= value;
            }
        }
    };
    $.fn.treegrid.defaults.operators = $.fn.datagrid.defaults.operators;
    
    function resizeFilter(target, field, width){
        var dg = $(target);
        var header = dg.datagrid('getPanel').find('div.datagrid-header');
        var ff = field ? header.find('input.datagrid-filter[name="'+field+'"]') : header.find('input.datagrid-filter');
        ff.each(function(){
            var name = $(this).attr('name');
            var col = dg.datagrid('getColumnOption', name);
            var btn = $(this).closest('div.datagrid-filter-c').find('a.datagrid-filter-btn');
            if (width != undefined){
                this.filter.resize(this, width);
            } else {
                this.filter.resize(this, col.width - btn._outerWidth());
            }
        });
    }
    
    function getFilterComponent(target, field){
        var header = $(target).datagrid('getPanel').find('div.datagrid-header');
        return header.find('tr.datagrid-filter-row td[field="'+field+'"] input.datagrid-filter');
    }
    
    /**
     * get filter rule index, return -1 if not found.
     */
    function getRuleIndex(target, field){
        var name = getPluginName(target);
        var rules = $(target)[name]('options').filterRules;
        for(var i=0; i<rules.length; i++){
            if (rules.field == field){
                return i;
            }
        }
        return -1;
    }
    
    function addFilterRule(target, param){
        var name = getPluginName(target);
        var opts = $(target)[name]('options');
        var rules = opts.filterRules;
        var index = getRuleIndex(target, param.field);
        if (index >= 0){
            if (param.op == 'nofilter'){
                removeFilterRule(target, param.field);
            } else {
                $.extend(rules[index], param);
            }
        } else {
            rules.push(param);
        }
        
        var input = getFilterComponent(target, param.field);
        if (input.length){
            if (param.op != 'nofilter'){
                input[0].filter.setValue(input, param.value);
            }
            var menu = input[0].menu;
            if (menu){
                menu.find('.'+opts.filterMenuIconCls).removeClass(opts.filterMenuIconCls);
                var item = menu.menu('findItem', opts.operators[param.op]['text']);
                menu.menu('setIcon', {
                    target: item.target,
                    iconCls: opts.filterMenuIconCls
                });
            }
        }
    }
    
    function removeFilterRule(target, field){
        var name = getPluginName(target);
        var dg = $(target);
        var opts = dg[name]('options');
        if (field){
            var index = getRuleIndex(target, field);
            if (index >= 0){
                opts.filterRules.splice(index, 1);
            }
            _clear([field]);
        } else {
            opts.filterRules = [];
            var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields'));
            _clear(fields);
        }
        
        function _clear(fields){
            for(var i=0; i<fields.length; i++){
                var input = getFilterComponent(target, fields);
                if (input.length){
                    input[0].filter.setValue(input, '');
                    var menu = input[0].menu;
                    if (menu){
                        menu.find('.'+opts.filterMenuIconCls).removeClass(opts.filterMenuIconCls);
                    }
                }
            }
        }
    }
    
    function doFilter(target){
        var name = getPluginName(target);
        var state = $.data(target, name);
        var opts = state.options;
        if (opts.remoteFilter){
            $(target)[name]('load');
        } else {
            $(target)[name]('getPager').pagination('refresh', {pageNumber:1});
            $(target)[name]('options').pageNumber = 1;
            $(target)[name]('loadData', state.filterSource || state.data);
        }
    }
    
    function myLoadFilter(data){
        var name = getPluginName(this);
        var state = $.data(this, name);
        var opts = state.options;
        
        if (name == 'datagrid' && $.isArray(data)){
            data = {
                total: data.length,
                rows: data
            };
        }
        if (!opts.remoteFilter){
            if (!state.filterSource){
                state.filterSource = data;
            }
            data = $.extend({}, state.filterSource);
            if (opts.filterRules.length){
                var rows = [];
                for(var i=0; i<data.rows.length; i++){
                    var row = data.rows;
                    if (isMatch(row)){
                        rows.push(row);
                    }
                }
                data = {
                    total: data.total - (data.rows.length - rows.length),
                    rows: rows
                };
            }
            if (opts.pagination){
                var dg = $(this);
                var pager = dg.datagrid('getPager');
                pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination('refresh',{
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });
                        dg.datagrid('loadData', state.filterSource);
                    }
                });
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = data.rows.slice(start, end);
            }
        }
        return data;
        
        function isMatch(row){
            var rules = opts.filterRules;
            for(var i=0; i<rules.length; i++){
                var rule = rules;
                var source = row[rule.field];
                if (source != undefined){
                    var op = opts.operators[rule.op];
                    if (!op.isMatch(source, rule.value)){return false}
                }
            }
            return true;
        }
    }
    
    function init(target, filters){
        filters = filters || [];
        var name = getPluginName(target);
        var state = $.data(target, name);
        var opts = state.options;
        opts.filterRules = [];
        
        var onResizeColumn = opts.onResizeColumn;
        opts.onResizeColumn = function(field,width){
            if (opts.fitColumns){
                resizeFilter(target, null, 10);
                $(target).datagrid('fitColumns');
                resizeFilter(target);
            } else {
                resizeFilter(target, field);
            }
            onResizeColumn.call(target, field, width);
        };
        var onResize = opts.onResize;
        opts.onResize = function(width,height){
            if (opts.fitColumns){
                resizeFilter(target, null, 10);
                $(target).datagrid('fitColumns');
                resizeFilter(target);
            }
            onResize.call(this, width, height);
        }
        var onBeforeLoad = opts.onBeforeLoad;
        opts.onBeforeLoad = function(param1, param2){
            if (param1){
                param1.filterRules = opts.filterStringify(opts.filterRules);
            }
            if (param2){
                param2.filterRules = opts.filterStringify(opts.filterRules);
            }
            return onBeforeLoad.call(this, param1, param2);
        };
        opts.loadFilter = myLoadFilter;
        
        initCss();
        createFilter(true);
        createFilter();
        if (opts.fitColumns){
            setTimeout(function(){
                resizeFilter(target);
            }, 0);
        }
        
        function initCss(){
            if (!$('#datagrid-filter-style').length){
                $('head').append(
                    '<style id="datagrid-filter-style">' +
                    'a.datagrid-filter-btn{display:inline-block;width:22px;height:22px;margin:0;vertical-align:top;cursor:pointer;opacity:0.6;filter:alpha(opacity=60);}' +
                    'a:hover.datagrid-filter-btn{opacity:1;filter:alpha(opacity=100);}' +
                    '.datagrid-filter-row .textbox,.datagrid-filter-row .textbox .textbox-text{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' +
                    '.datagrid-filter-row input{margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' +
                    '</style>'
                );
            }
        }
        
        /**
         * create filter component
         */
        function createFilter(frozen){
            var dc = state.dc;
            var fields = $(target).datagrid('getColumnFields', frozen);
            if (frozen && opts.rownumbers){
                fields.unshift('_');
            }
            var table = (frozen?dc.header1:dc.header2).find('table.datagrid-htable');
            table.find('tr').each(function(){
                $(this).height($(this).height());
            });
            
            // clear the old filter component
            table.find('input.datagrid-filter').each(function(){
                if (this.filter.destroy){
                    this.filter.destroy(this);
                }
                if (this.menu){
                    $(this.menu).menu('destroy');
                }
            });
            table.find('tr.datagrid-filter-row').remove();
            
            var tr = $('<tr class="datagrid-header-row datagrid-filter-row"></tr>');
            if (opts.filterPosition == 'bottom'){
                tr.appendTo(table.find('tbody'));
            } else {
                tr.prependTo(table.find('tbody'));
            }
            
            for(var i=0; i<fields.length; i++){
                var field = fields;
                var col = $(target).datagrid('getColumnOption', field);
                if (col && (col.checkbox || col.expander)){
                    field = '_';
                }
                var td = $('<td></td>').attr('field', field).appendTo(tr);
                if (col && col.hidden){td.hide();}
                if (field == '_'){continue;}
                var div = $('<div class="datagrid-filter-c"></div>').appendTo(td);
                
                var fopts = getFilter(field);
                var type = fopts ? fopts.type : 'text';
                
                var filter = opts.filters[fopts ? fopts.type : 'text'];
                var input = filter.init(div, fopts ? (fopts.options||{}) : {});
                input.addClass('datagrid-filter').attr('name', field);
                input[0].filter = filter;
                
                if (fopts){
                    input[0].menu = createFilterButton(div, fopts.op);
                    if (fopts.options && fopts.options.onInit){
                        fopts.options.onInit.call(input[0]);
                    }
                } else if (type == 'text'){
                    input.bind('keydown', function(e){
                        var t = $(this);
                        if (this.timer){
                            clearTimeout(this.timer);
                        }
                        if (e.keyCode == 13){
                            addFilterRule(target, {
                                field: t.attr('name'),
                                op: 'contains',
                                value: t.val()
                            });
                            doFilter(target);
                        } else {
                            this.timer = setTimeout(function(){
                                addFilterRule(target, {
                                    field: t.attr('name'),
                                    op: 'contains',
                                    value: t.val()
                                });
                                doFilter(target);
                            }, opts.filterDelay);
                        }
                    });
                }
                
                resizeFilter(target, field);
            }
        }
        
        function createFilterButton(container, operators){
            if (!operators){return null;}
            
            var btn = $('<a class="datagrid-filter-btn">&nbsp;</a>').addClass(opts.filterBtnIconCls);
            if (opts.filterBtnPosition == 'right'){
                btn.appendTo(container);
            } else {
                btn.prependTo(container);
            }
            var menu = $('<div></div>').appendTo('body');
            menu.menu({
                alignTo:btn,
                onClick:function(item){
                    var btn = $(this).menu('options').alignTo;
                    var td = btn.closest('td[field]');
                    var field = td.attr('field');
                    var input = td.find('input.datagrid-filter');
                    var value = input[0].filter.getValue(input);
                    
                    addFilterRule(target, {
                        field: field,
                        op: item.name,
                        value: value
                    });
                    
                    opts.onClickMenu.call(target, item, btn);
                    
                    doFilter(target);
                }
            });
            $.each(['nofilter'].concat(operators), function(index,item){
                var op = opts.operators[item];
                if (op){
                    menu.menu('appendItem', {
                        text: op.text,
                        name: item
                    });
                }
            });
            btn.bind('click', {menu:menu}, function(e){
                $(e.data.menu).menu('show');
                return false;
            });
            return menu;
        }
        
        function getFilter(field){
            for(var i=0; i<filters.length; i++){
                var filter = filters;
                if (filter.field == field){
                    return filter;
                }
            }
            return null;
        }
    }
    
    $.extend($.fn.datagrid.methods, {
        enableFilter: function(jq, filters){
            return jq.each(function(){
                init(this, filters);
            });
        },
        addFilterRule: function(jq, param){
            return jq.each(function(){
                addFilterRule(this, param);
            });
        },
        removeFilterRule: function(jq, field){
            return jq.each(function(){
                removeFilterRule(this, field);
            });
        },
        doFilter: function(jq){
            return jq.each(function(){
                doFilter(this);
            });
        },
        getFilterComponent: function(jq, field){
            return getFilterComponent(jq[0], field);
        }
    });
})(jQuery);

 

PAGINA HTML

Spoiler

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="crud, cadastro de clientes e filtro, php, mysql, crud php mysql">
    <meta name="description" content="administre os seus clientes, banco de dados completo em www.montepage.com.br">
    <title>LISTA DE RAMAIS</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="js/datagrid-filter.js"></script>
    <script type="text/javascript">
        $(function(){
            $("div.easyui-layout").layout();
            $('#dg').edatagrid({
                url: 'get_cadastroclientes.php',
                saveUrl: 'save_cadastroclientes.php',
                updateUrl: 'update_cadastroclientes.php',
                destroyUrl: 'destroy_cadastroclientes.php',
                fitColumns: true
            });
            var dg = $('#dg');
            dg.edatagrid();    // create datagrid
            dg.edatagrid('enableFilter');    // enable filter
        });
    </script>
</head>
<body>
<center>
    <div class="easyui-layout">
    
            </div>
    <div align="left">
    <table id="dg" title="Lista de Ramais - Dê um duplo clique na linha para editar e depois clique em salvar." toolbar="#toolbar" pagination="" idField="id"
            rownumbers="true" fitColumns="true" resizable="true">
        <thead>
            <tr>
                <th align="center" field="nome" width="50" editor="{type:'validatebox',options:{required:true}}">BUSCA POR SETOR</th>
                <th align="center" field="sobrenome" width="50" editor="{type:'validatebox',options:{required:true}}">BUSCA POR NOME</th>
                <th align="center" field="telefone" width="50" editor="text">BUSCA POR RAMAL</th>
                <th align="center" field="email" width="50" editor="{type:'validatebox',options:{required:true}}">BUSCA POR EMPRESA</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">Novo</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Remover</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Salvar</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancelar</a>
    </div>
    </div>
    
    
</body>
</html>