【EasyUI】datagrid相关操作、弹窗windows

datagrid相关操作、弹窗windows

1.datagrid+gridbar+固定列+默认设置

$.fn.datagrid.defaults.fitColumns = false;
$.fn.datagrid.defaults.border = false;
$.fn.datagrid.defaults.singleSelect = true;
$.fn.datagrid.defaults.pagination = true;
$.fn.datagrid.defaults.pageSize = 20;
$.fn.datagrid.defaults.fit = true;
$.fn.datagrid.defaults.pageList = [8, 10, 20];
$.fn.datagrid.defaults.checkOnSelect = false;
$.fn.datagrid.defaults.selectOnCheck = false;

<div data-options="region:'center',border:false" title="数据列表">
<table id="grid" toolbar="#gridbar"></table>
<div id="gridbar">
<div style="padding: 2px">
<a id="addBtn"    class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-add'">新增</a>
<a id="updateBtn" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-page_edit'">查看/更新</a>
<a id="delBtn"    class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-delete'">删除</a>
</div>
</div>
</div>

/** grid对象+渲染+按钮* */
var grid = $("#grid");
renderGrid();
bindGridToorBar();

//渲染datagrid,固定数据无法分页。
function renderGrid(){
grid.datagrid({
url :URL.gridData,
onDblClickRow : function(index,row) {//双击事件
openFormWin(row.id,row.d);
},
queryParams:{//进行传参,此处只是模拟。
id :'FI-SW-01',
d  :'Large'
},
frozenColumns :[[
{field:"id",checkbox:true},
{field:"a",title:"a",align:"left",halign:"center",width:100},
{field:"b",title:"b",align:"left",halign:"center",width:100},
{field:"c",title:"c",align:"left",halign:"center",width:100},
]],
columns:[[
{field:"d",title:"d",align:"left",halign:"center",width:100},
{field:"e",title:"e",align:"left",halign:"center",width:100},
{field:"f",title:"f",align:"left",halign:"center",width:100},
{field:"g",title:"g",align:"left",halign:"center",width:100},
{field:"h",title:"h",align:"left",halign:"center",width:100},
{field:"cz",title:"操作",align:"center",halign:"center",width:200,formatter: fmtCz}
]],
onLoadSuccess : function(){
$(".fmtBtn").linkbutton({
plain : true,
onClick : function(){
var id = $(this).data("id");
doSomething(id);
}
});
//也可用只渲染为按钮
$(".fmtBtn").each(function(){
var d = $(this).data("d");
$(this).tooltip({
position: 'right',
content: "<span style='color:#abc'>"+d+"</span>",
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});
});
}
})
}

2.formatter渲染行操作

  按钮的渲染，已在上面onLoadSuccess中给出。

/**
* formatter方法

4000
*/
function fmtCz(value,row,index){
return "<a class='fmtBtn' data-id='"+row.id+"' data-d='"+row.d+"' href='#' style='background-color:#3EF;color:#FFF;'>点击</a>";
}

3.datagrid选择/勾选

这2个方法可以设置为公用方法进行调用。

function gridSelectedValid(grid) {
var row = grid.datagrid("getSelected");
if (row != null) {
return row;
} else {
$.messager.alert("提示", "无选择数据");
return false;
}
}

function gridChecked(grid) {
var rows = grid.datagrid("getChecked");

if (rows.length > 0) {
return $.map(rows, function(n) {
return n.id;
}).join(",");
} else {
$.messager.alert("提示", "无勾选数据");
return false;
}
}

4.gridbar操作

/** grid按钮事件* */
function bindGridToorBar() {
$("#addBtn").bind("click",function(){
openFormWin();
});

$("#updateBtn").bind("click",function(){
var row = gridSelectedValid(grid);
if(row){
openFormWin(row.id);
}
});

$("#delBtn").bind("click",function(){
deleteByIds();
});
}

//删除测试
function deleteByIds(){
var ids = gridCheckedValid(grid);//在通用js中设置了统一的方法
if(ids){
$.messager.confirm("提示","是否确定?",function(r){
if(r){
alert(ids);
}
});
}
}

5.onDblClickRow行双击事件

行双击事件，一般为打开查看事件，需要开启新的弹窗页面。

/**跳转到其他页面**/
function openFormWin(id,d){
var win = $("<div id='newWin'></div>").window({
title : id ? "查看" :"新增",
href :URL.formWin,
width : 500,
height : 302,
onLoad : function(){
if(id){
formLoadData(id);
}
$("#haha").textbox("setValue",d);
},
onClose : function() {
win.window('destroy');
}
});
}

6.查询+清空+form序列化

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};

<a id="query" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-zoom'">查询</a>
<a id="clear" class="easyui-linkbutton" data-options="plain:false,iconCls:'icon-cross'">重置</a>

/** 查询按钮事件 **/
function bindSearchBtns(){

//带参数，也可序列化数组类型,load时可查看js中url中的参数
$("#query").unbind().bind("click",function(){
var formData = queryForm.serializeObject({transcript:"overlay"});
grid.datagrid("load",formData);
});
//查询form清空
$("#clear").unbind().bind("click",function(){
queryForm.form("clear");
});
}

7.总结

设置datagrid行高：easyui.css中设置.datagrid-row{height:25px;}，默认为25px高，可自行修改。
固定列：当列数目过多或太宽超过屏幕宽度，设置frozenColumns即可。
初始化查询参数：queryParams
行内部操作：formatter+onLoadSuccess方法渲染
datagrid勾选/选择：获取选择+获取主要id
form序列化：

datagrid默认设置：

8.源码

github:https://github.com/BeHappyWsz/easyui-validate.git
资源下载：http://download.csdn.net/download/qq_33560169/10159211#
包含了1000个图标，无法直接放在百度盘内，若需要也可留言。