【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方法 */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.总结

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

8.源码

github:https://github.com/BeHappyWsz/easyui-validate.git

资源下载：http://download.csdn.net/download/qq_33560169/10159211#

包含了1000个图标，无法直接放在百度盘内，若需要也可留言。