上一篇博客中 Easyui-Datagrid—表头灵活显示小编给大家分享用户体验度的页面的几大要点
用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。
操作上假设是用户–而不是计算机或软件–开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。
提供一种稳定的感觉,使得界面熟悉而又可预测。包括命令的名称、信息的可视表示,操作行为,以及元素在屏幕和窗口内部的放置。
提供直接而直观的界面,没有多余的其他无用信息ps:功能可以统一放入更多种
可以使用菜单来显示操作或选择的列表,还可以使用对话框来显示一组选项。
小编努力在做“猪”都能使用的软件UI界面设计(ps:(*^__^*)嘻嘻……不知道这个比喻恰不恰当,戳到痛处的小盆友无怪哈)
经这样一位“高人”指点,在Easyui-DataGrid上我有了新的想法,为何不加上这样的效果展示给用户呢?
小编Demo运用的是MVC3框架结合jQueryEasyUI开发UI界面,在你要实现的Index母版页视图中添加js的应用,就能实现该效果
//表头拖动 js 事件
$.extend($.fn.datagrid.methods, {
columnMoving: function (jq) {
return jq.each(function () {
var target = this;
var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
cells.draggable({
revert: true,
cursor: 'pointer',
edge: 5,
proxy: function (source) {
var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
p.html($(source).text());
p.hide();
return p;
},
onBeforeDrag: function (e) {
e.data.startLeft = $(this).offset().left;
e.data.startTop = $(this).offset().top;
},
onStartDrag: function () {
$(this).draggable('proxy').css({
left: -10000,
top: -10000
});
},
onDrag: function (e) {
$(this).draggable('proxy').show().css({
left: e.pageX + 15,
top: e.pageY + 15
});
return false;
}
}).droppable({
accept: 'td[field]',
onDragOver: function (e, source) {
$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
$(this).css('border-left', '1px solid #ff0000');
},
onDragLeave: function (e, source) {
$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
$(this).css('border-left', 0);
},
onDrop: function (e, source) {
$(this).css('border-left', 0);
var fromField = $(source).attr('field');
var toField = $(this).attr('field');
setTimeout(function () {
moveField(fromField, toField);
$(target).datagrid();
$(target).datagrid('columnMoving');
}, 0);
}
});
// move field to another location
function moveField(from, to) {
var columns = $(target).datagrid('options').columns;
var cc = columns[0];
var c = _remove(from);
if (c) {
_insert(to, c);
}
function _remove(field) {
for (var i = 0; i < cc.length; i++) {
if (cc[i].field == field) {
var c = cc[i];
cc.splice(i, 1);
return c;
}
}
return null;
}
function _insert(field, c) {
var newcc = [];
for (var i = 0; i < cc.length; i++) {
if (cc[i].field == field) {
newcc.push(c);
}
newcc.push(cc[i]);
}
columns[0] = newcc;
}
}
});
}
});
小编上传了一个Demo ,实现表头灵活显示和表头拖动的效果,喜欢的博友可以下载看看。