Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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*);** function _del(row){*
* var index = dg.datagrid('getRowIndex', row);** var idValue = row[opts.idField||'id'];*
* $.post(opts.destroyUrl, {id:idValue}, function(data){*
* var index = dg.datagrid('getRowIndex', idValue);** var t = $(opts.tree);*
* var node = t.tree('find', idValue);** url: null, // return the datagrid data*
* saveUrl: null, // return the added row*
* updateUrl: null, // return the updated row*
* destroyUrl: null, // return {success:true}** treeUrl: null, // return tree data*
* treeDndUrl: null, // to process the drag and drop operation, return {success:true}** onAdd: function(index, row){},*
* onEdit: function(index, row){},*
* onBeforeSave: function(index){},*
* onSave: function(index, row){},*
* onDestroy: function(index, row){},*
* onError: function(index, row){}*
*DATAGRID FILTER** *
*Spoiler** *
DATAGRID FILTER
*(function($){*
* function getPluginName(target){** var oldLoadDataMethod = $.fn.datagrid.methods.loadData;*
* $.fn.datagrid.methods.loadData = function(jq, data){*
* jq.each(function(){** filterStringify: function(data){*
* return JSON.stringify(data);** init: function(container, options){*
* return $('<span></span>').appendTo(container);** getValue: function(target){*
* return $(target).html();** isMatch: function(source, value){*
* return source.toLowerCase().indexOf(value.toLowerCase()) >= 0;** isMatch: function(source, value){*
* return source == value;** isMatch: function(source, value){*
* return source != value;** isMatch: function(source, value){*
* return source.toLowerCase().indexOf(value.toLowerCase()) == 0;** isMatch: function(source, value){*
* return source.toLowerCase().indexOf(value.toLowerCase(), source.length - value.length) !== -1;** isMatch: function(source, value){*
* return source < value;** isMatch: function(source, value){*
* return source <= value;** isMatch: function(source, value){*
* return source > value;** isMatch: function(source, value){*
* return source >= value;** 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');** 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');** function getRuleIndex(target, field){*
* var name = getPluginName(target);*
* var rules = $(target)[name]('options').filterRules;*
* for(var i=0; i<rules.length; i++){** function addFilterRule(target, param){*
* var name = getPluginName(target);*
* var opts = $(target)[name]('options');*
* var rules = opts.filterRules;*
* var index = getRuleIndex(target, param.field);** function removeFilterRule(target, field){*
* var name = getPluginName(target);*
* var dg = $(target);*
* var opts = dg[name]('options');** function _clear(fields){*
* for(var i=0; i<fields.length; i++){*
* var input = getFilterComponent(target, fields**);** function doFilter(target){*
* var name = getPluginName(target);*
* var state = $.data(target, name);*
* var opts = state.options;** function myLoadFilter(data){*
* var name = getPluginName(this);*
* var state = $.data(this, name);*
* var opts = state.options;** var rows = [];*
* for(var i=0; i<data.rows.length; i++){*
* var row = data.rows**;** var dg = $(this);*
* var pager = dg.datagrid('getPager');** var start = (opts.pageNumber-1)*parseInt(opts.pageSize);*
* var end = start + parseInt(opts.pageSize);** function isMatch(row){*
* var rules = opts.filterRules;*
* for(var i=0; i<rules.length; i++){*
* var rule = rules**;*
* var source = row[rule.field];** var op = opts.operators[rule.op];*
* if (!op.isMatch(source, rule.value)){return false}** var name = getPluginName(target);*
* var state = $.data(target, name);*
* var opts = state.options;** var onResizeColumn = opts.onResizeColumn;*
* opts.onResizeColumn = function(field,width){** var onResize = opts.onResize;*
* opts.onResize = function(width,height){** var onBeforeLoad = opts.onBeforeLoad;*
* opts.onBeforeLoad = function(param1, param2){** function createFilter(frozen){*
* var dc = state.dc;*
* var fields = $(target).datagrid('getColumnFields', frozen);** var table = (frozen?dc.header1:dc.header2).find('table.datagrid-htable');*
* table.find('tr').each(function(){** for(var i=0; i<fields.length; i++){*
* var field = fields**;*
* var col = $(target).datagrid('getColumnOption', field);** 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.bind('keydown', function(e){*
* var t = $(this);** function createFilterButton(container, operators){*
* if (!operators){return null;}** 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);** $.each(['nofilter'].concat(operators), function(index,item){*
* var op = opts.operators[item];** function getFilter(field){*
* for(var i=0; i<filters.length; i++){*
* var filter = filters**;** enableFilter: function(jq, filters){*
* return jq.each(function(){** addFilterRule: function(jq, param){*
* return jq.each(function(){** removeFilterRule: function(jq, field){*
* return jq.each(function(){** doFilter: function(jq){*
* return jq.each(function(){** getFilterComponent: function(jq, field){*
* return getFilterComponent(jq[0], field);*
*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(){** </script>*
*</head>*
*<body>*
*<center>*
* <div class="easyui-layout">** </div>*
* <div align="left">** <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> *
* *Carregando comentários...