jquery easyui 封装

使用easyui datagrid部分，主要是节省了写一堆html代码。

通过封装，可以节省每个页面都写一堆easyui的代码，相对要简单一些，个人觉得，毕竟是自己做的，难免自我感觉好些，哈哈。

封装好了之后，只需要在html中引用各种需要库，并在body中写<table id="myid"><table>

然后js中调用baseGrid('myid',"focus_ft","<{:U('Focus/focuslist')}>",cols,data_opt); 即可。

该方法中第一个参数，是table id，

第二个参数是需要加的一些过滤功能的所在的div 的id，比如红框的区域

第三个参数是加载数据的地址，可以是一个路由路径，或者别的数据地址比如静态文件地址,例子中的uri是thinkphp的路由地址

第四个参数，是列的配置，有多少列，配置多少个，就复制粘贴的活，应该是挺轻松的。见

第五个参数是需要改变的配置，具体配置项参考easyui官方文档，可以省略，会默认加载。

所以必须要的就是下面框内的东西啦（注意啦，

formatter:orderOperateFormatter 这个东西是什么？

orderOperateFormatter这个是一个js方法，自己写，每个页面都不一样。比如编辑，删除等。其他的列如果有需要也可以这么写，这是easyui的属性

），OK

$(function(){
var data_opt = {'pageList':[5,10, 20, 30,50],'pageSize':10,"sortName":"id","sortOrder":"desc"};var cols = [[ //注意要两个嵌套的中括号{ field:'ck', checkbox:true },{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },
                    { field:'name', title: '推荐位名称', width: 80, align: 'center'},
                    { field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }]]; baseGrid('dg',"focus_ft","<{:U('Focus/focuslist')}>",cols);
});function orderOperateFormatter(val){var btn = [];btn.push('<a id="btedit"  href="__URL__/modify/id/'+val+'">编辑</a>');btn.push('<a id="btdel" href="#">删除</a>');return btn.join("|");}

下面是页面部分，和封装的完整代码。

页面部分：

<body><div class="right-page"><form id="submitForm" name="submitForm" action="" method="post"><div class="order-search"><span><input type="hidden" name="ids"><input id="roleBt70" type="button"  class="order-search-button" onclick="allDel()" value="全部删除"/><input id="roleBt71" type="button"  class="order-search-button" onclick="allDisplay()" value="全部显示"/><input id="roleBt72" type="button"  class="order-search-button" onclick="allHidden()" value="全部隐藏"/></span></div></form><div class="order-list"><div class="order-list-table"><table id="dg" title="推荐位" style="width:80%;height:650px" ></table></div></div><div id="focus_ft" class="order-search"><form><span><select name="search[type]"  id="order_select_one"><option value="id">单号</option><option value="name">名称</option></select></span><span><input name="search[txt_value]"  type="text" size="15" /></span><span>发布日期：<input type="text" size="20" name="search[date_from]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})" />-<input type="text" size="20" name="search[date_to]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})"/></span><input type="button" id="roleBt1" value="查 询" class="order-search-button" onclick="search('dg',this);" /></form></div><br/></div></body>

View Code

封装js代码：

/*version 1.0*mj*//**点击后列出该行的扩展内容，使用此方法* id:grid 的ID* dg_toolbar：grid的复杂操作部分id，"dg_area_id"* Url:获取数据URL地址,--"<{:U('Focus/focuslist')}>"--"a.json"* expandUrl:隐藏内容URL地址* cols:列信息var cols = [[ //注意要两个嵌套的中括号{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },{ field:'name', title: '推荐位名称', width: 80, align: 'center'},{ field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }]];* data_opt：grid属性，可省略 var data_opt = {'pageList':[10, 20, 30,50],'pageSize':10,};*/
function expandGrid(id,dg_toolbar,mainUrl,expandUrl,cols,data_opt){var default_opt = {'border':false,'fit':true,'fitColumns':true,'rownumbers':true,'singleSelect':false,'checkOnSelect':false,'selectOnCheck':true,'pagination':true,'pageList':[10, 20, 30, 50],'pageSize':10};for(opt in data_opt){default_opt[opt]=data_opt[opt];}$('#'+id).datagrid({url: mainUrl,loadMsg: '数据加载中,请稍候...',pageSize: default_opt["pageSize"],pageList: default_opt["pageList"],pagination:default_opt["pagination"],singleSelect:default_opt["singleSelect"],fitColumns:default_opt["fitColumns"],checkOnSelect:default_opt["checkOnSelect"],selectOnCheck:default_opt["selectOnCheck"],view: detailview,toolbar: dg_toolbar==""?"":"#"+dg_toolbar,columns:cols,detailFormatter:function(index,row){return '<div class="ddv" style="padding:5px 0"></div>';},onExpandRow: function(index,row){var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');ddv.panel({height:"auto",border:false,cache:false,href:expandUrl+row.id,onLoad:function(){$('#'+id).datagrid('fixDetailRowHeight',index);}});$('#'+id).datagrid('fixDetailRowHeight',index);}});
}/**普通grid展示* id:grid 的ID* dg_toolbar：grid的复杂操作部分id，"dg_area_id"* Url:获取数据URL地址,--"<{:U('Focus/focuslist')}>"--"a.json"* cols:列信息var cols = [[ //注意要两个嵌套的中括号{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },{ field:'name', title: '推荐位名称', width: 80, align: 'center'},{ field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }]];* data_opt：grid属性，可省略 var data_opt = {'pageList':[10, 20, 30,50],'pageSize':10,};*/
function baseGrid(id,dg_toolbar,Url,cols,data_opt){var default_opt = {'border':false,'fit':true,'fitColumns':true,'rownumbers':true,'singleSelect':false,'checkOnSelect':false,'selectOnCheck':true,'pagination':true,'pageList':[5, 10, 20, 30, 50],'pageSize':10};for(opt in data_opt){default_opt[opt]=data_opt[opt];}$('#'+id).datagrid({url: Url,loadMsg: '数据加载中,请稍候...',pageSize: default_opt["pageSize"],pageList: default_opt["pageList"],pagination:default_opt["pagination"],singleSelect:default_opt["singleSelect"],fitColumns:default_opt["fitColumns"],checkOnSelect:default_opt["checkOnSelect"],selectOnCheck:default_opt["selectOnCheck"],toolbar: dg_toolbar==""?"":"#"+dg_toolbar,columns:cols});}function contains(arr, obj) {for (var i = 0; i < arr.length; i++) {if (arr[i] === obj) {return true;}}return false;
}/*获取grid的id串，以，隔开，如果是字符串，则以'',''进行隔开*grid_id  grid的id*id 要组拼的字段id
*/
function getSelections(grid_id,id){var rows = $("#"+grid_id).datagrid('getSelections');var ss=[];for(var i=0; i<rows.length; i++){var row = rows[i];ss.push(eval("row."+id));}return ss.join(',');
}/** 查询方法，查询区域必须用<form></form>包裹住，方便提交服务器处理* 传入grid的id,that表示查询按钮，传入this即可*/
function search(grid_id,that){ var data = $("#"+grid_id);var queryParams = data.datagrid('options').queryParams;$.each($(that).parent('form').serializeArray(), function() {queryParams[this['name']] = this['value'];});data.datagrid({pageNumber: 1});
}

转载于:https://www.cnblogs.com/qingjiao/p/4156065.html

jquery easyui 封装相关推荐

JQuery EasyUi之界面设计——前言与界面效果（一）
为什么80%的码农都做不了架构师?>>> 如果冯巩的开场白是"观众朋友们,我想死你们了",那么我的开场白是"最近一直很忙,很久没有发文了" ...
富有客户端技术之——jQuery EasyUI
在B/S开发中页面制作涉及HTML.CSS.javascript等技术,我们随掌握相关技术,但实际开发中页面美化特别是样式设计一直困扰着我们.怎样更好.更快的设计美观.专业.时代性的页面呢?JQuer ...
ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
jquery easyui Tab 引入页面的问题
jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:"href远程请求"和"content本地内容",本文就两种方式的优缺点进 ...
jQuery EasyUI详解-EasyUI环境配置
需要预先说明的一点是,不管是EasyUI也好,Bootstrap也罢,都可以认为是在CSS.Javascript.jQuery上再封装了一层.所以我们来看一个十分简单的例子: <a href=& ...
jQuery EasyUI 1.9.4中文参考手册离线chm格式
jquery-easyui1.9.4中文参考手册是一套关于jQuery EasyUI的参考帮助文档,在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性.文法.事件等内容的查 ...
JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

jquery easyui 封装

jquery easyui 封装相关推荐

最新文章

热门文章