jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)
2015-02-03 19:31
567 查看
初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到
引用的文件jquery.min.js
jquery.easyui.min.js
样式:icon.css
easyui.css
页面初始化easy ui 插件
上面看到数据表格是个table,想必大家都不陌生,接下来初始化easyui
初始化easyui
上面各个属性已经注释的很详细了,相信大家应该可以看的懂,不懂得可以咨询我
着重说几个范二的问题,当时自己做的时候走了弯路:
一、idField 这个属性,一定要注意,绑定数据库自增或者不会有重复数据的列,不然后边获取选中多行的数据时,打死你就只能获取到选中第一列的值,要麽就不绑定,不写,
建议写上,指不定哪里还是需要这个属性的,暂时我还没发现,有知道了朋友可以留个言,交流一下,非常感谢啦
二、分页这个呢,我是重新绑定的,也可以在里面属性设置,要绑定的话,注意这个属性showPageList要写哦,不然不显示的呢
三、就是表格列内容格式化问题了,这个不注意的话,也会出很多幺蛾子,浪费很多精力和时间,当时本人就是看官方例子啊,百度查啊 ,但给的代码都是和官方一样的
什么问题呢? 小二这就给客官解释一下,我当时由于为了填充数据,实际没有那么多列,所以绑定数据的时候就把列重复绑定了,页面呈现是没有问题的
但是格式化和内容显示为红色啊,背景变色啊,这些发现都没有效果了,why!why!why!why!!!!,其实一直不晓得问题所在,当然也是官网,度娘啊的
查寻,大神都给的是官网demo一样的代码,最后终于一个大神也遇到这个问题了,哈哈,原来是绑定的列重复了,前面的字段和后边的列字段名称
是一样的,但是前面的没格式化,后边的格式化,所以就出现了没有效果的问题,所以啊,注意细节问题,还是蛮重要的
当然颜色这个格式化问题,和网上说的不太一样,有的都给的<span style='color:red;'>sss</span>返回,试了很多次,去火狐浏览器
查看元素发现,<td style='<span style='color:red;'>sss</span>'></td>这样了,
所以加颜色的话,只返回 color:red;这样即可,不要想当然哦!
接下来说一下获取行问题,其实啊,上面说了一点问题了,也是比较坑的,我是研究一个java童鞋说的源码的判断问题,才解决的
当然啦,非常感谢那位大神啊救我于水火之中
获取选中行的数据问题,在强调一下idField-------绑定的问题,引发的问题,就是获取多行的值时候,都是一个第一行的值,不会循环得到所有行,这个值呢跟当前页选中也数据也是有关系的,所以慎重对待它哦
解析一下为什么,因为绑定一列数据有可能重复的数据的话,当选中多行的时候,它认为你选中的都是一样的数据,因为idField它绑定的数据重复了,即一样的行
接下来就是查询了
这个呢等于说是重新绑定了一下,获取有什么reload什么的,也可以做到吧没去研究,既然封装了,就传参数进去重新调用了一下,效果都一样,上面注释获取值的方法也写了。
好久不写心得和研究这么东西了,感觉写起来还挺费劲,也是项目用到这个,花时间一天时间研究一下,趁加班,整理了一下,希望可以给初学的同行,一点点指导,少走一些弯路,少花费一些时间,让你的领导对你刮目相看
在很短时间内去适应,搞定一个东东,里面还有很多东西没去研究,比如动态 行编辑,增加,删除,以后用到再继续更新吧,祝大家新年快乐!
引用的文件jquery.min.js
jquery.easyui.min.js
样式:icon.css
easyui.css
页面初始化easy ui 插件
<html xmlns="http://www.w3.org/1999/xhtml"> <div class="cg-op"> <div style="float:left;"> <a href="/inventory/diaobo_ck.aspx" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增调拨单</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">标记为已打印</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">导出</a> </div> <div style="float:right;"> <input class="easyui-textbox" data-options="prompt:'搜索单据编号、商品名称、备注'" style="width:200px;height:24px;"> <a href="#" id="btnSearch" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:60px" >查询</a> <a href="#" class="easyui-linkbutton" style="width:80px">高级搜索</a> </div> </div> <table id="datagrid"></table>//数据表格 </html>
上面看到数据表格是个table,想必大家都不陌生,接下来初始化easyui
$(function () { //初始化列表 InitGrid(""); //初始化查询事件 BindSearchEvent(); }) //实现对DataGird控件的绑定操作 function InitGrid(queryData) { $('#datagrid').datagrid({ //定位到Table标签,Table标签的ID是grid url: '/ws/ws_OperateAllot.aspx?op=loaddata', //指向后台的Action来获取当前菜单的信息的Json格式的数据 title: '调拨入库', iconCls: 'icon-view', loadMsg: "正在载入数据...", height: 500, width: function () { return document.body.clientWidth * 0.9 }, nowrap: true,//是否禁止文字自动换行设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 autoRowHeight: true,//行高是否自动 striped: true,//奇偶行使用不同背景色 collapsible: true,//是否可折叠 pagination: true,//分页是否显示 pageSize: 10,//每页多少条 //pageList: [20,50, 100, 200],//可选下拉每页多少条 rownumbers: true,//行号 fitColumns: false,//设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动 singleSelect: false,//设置为 true,则只允许选中一行。 checkOnSelect: false,//如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。如果设置为 false 时,只有当用户点击了复选框时,才会选中/取消选中复选框 //sortName: 'ID', //根据某个字段给easyUI排序 sortOrder: 'asc',//排序升序还是降序 remoteSort: false,//是否往后台发送排序 //idField: 'ID',//数据库自增列,如果不绑定正确,会引发选中 queryParams: queryData, //异步查询的参数 //frozenColumns: [[ // { // field: 'opt', title: '操作', width: 300, align: 'left', fixed: false, // formatter: function (value, rec) { // var btn = '<a class="editcls" onclick="SetRoleInfo(\'' + rec.userid + '\')" href="javascript:void(0)">编辑</a><a class="delcls" onclick="DelUser(\'' + rec.userid + '\')" href="javascript:void(0)">删除</a>'; // return btn; // } // } //]], columns: [[ //{ field: 'ck', checkbox: false }, //选择 { title: '制单人', field: 'inputman', width: 120, sortable: true }, { title: '制单日期', field: 'daytime', width: 120 }, { title: '单据编号', field: 'moveid', width: 120 }, { title: '预计调拨日期', field: 'outdate', width: 120 }, { title: '调出仓库', field: 'outsite', width: 120 }, { title: '出库状态', field: 'status', width: 80 }, { title: '出库日期', field: 'invaliddate', width: 120 }, { title: '调入仓库', field: 'insite', width: 120 }, { title: '入库状态', field: 'insite', width: 80, formatter: function (value, row, index) { //格式问题,格式不能应用在重复字段上,不然不起作用 return value; } }, { title: '入库日期', field: 'daytime', width: 120, styler: function (value, row) { //设置显示颜色,格式不能应用在重复字段上,不可以使用标签,不然无效,它只是纯样式就可以 // if(value<20)条件 return "color:red;"; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'} } }, { title: '备注', field: 'remark', width: 120 }, { field: 'opt', title: '操作', width: 150, align: 'left', formatter: function (value, rec) { var btn = '<a class="editcls" onclick="SetRoleInfo(\'' + rec.userid + '\')" href="javascript:void(0)">编辑</a><a class="delcls" onclick="DelUser(\'' + rec.userid + '\')" href="javascript:void(0)">删除</a>'; return btn; } } ]], onLoadSuccess: function (data) { $('.editcls').linkbutton({ text: '编辑', plain: true, iconCls: 'icon-edit' }); $('.getcls').linkbutton({ text: '查看', plain: true, iconCls: 'icon-search' }); $('.delcls').linkbutton({ text: '删除', plain: true, iconCls: 'icon-clear' }); } //onClickRow: function (rowIndex, rowData) { // alert(rowIndex); // $(this).datagrid('selectRow', rowIndex); //}, }) //////设置分页控件 var p = $('#datagrid').datagrid('getPager'); $(p).pagination({ showPageList: true, pageSize: 10,//每页显示的记录条数,默认为10 pageList: [10, 20, 30,50,100],//可以设置每页记录条数的列表 beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', /*onBeforeRefresh:function(){ $(this).pagination('loading'); alert('before refresh'); $(this).pagination('loaded'); }*/ }); };
初始化easyui
上面各个属性已经注释的很详细了,相信大家应该可以看的懂,不懂得可以咨询我
着重说几个范二的问题,当时自己做的时候走了弯路:
一、idField 这个属性,一定要注意,绑定数据库自增或者不会有重复数据的列,不然后边获取选中多行的数据时,打死你就只能获取到选中第一列的值,要麽就不绑定,不写,
建议写上,指不定哪里还是需要这个属性的,暂时我还没发现,有知道了朋友可以留个言,交流一下,非常感谢啦
二、分页这个呢,我是重新绑定的,也可以在里面属性设置,要绑定的话,注意这个属性showPageList要写哦,不然不显示的呢
三、就是表格列内容格式化问题了,这个不注意的话,也会出很多幺蛾子,浪费很多精力和时间,当时本人就是看官方例子啊,百度查啊 ,但给的代码都是和官方一样的
什么问题呢? 小二这就给客官解释一下,我当时由于为了填充数据,实际没有那么多列,所以绑定数据的时候就把列重复绑定了,页面呈现是没有问题的
但是格式化和内容显示为红色啊,背景变色啊,这些发现都没有效果了,why!why!why!why!!!!,其实一直不晓得问题所在,当然也是官网,度娘啊的
查寻,大神都给的是官网demo一样的代码,最后终于一个大神也遇到这个问题了,哈哈,原来是绑定的列重复了,前面的字段和后边的列字段名称
是一样的,但是前面的没格式化,后边的格式化,所以就出现了没有效果的问题,所以啊,注意细节问题,还是蛮重要的
当然颜色这个格式化问题,和网上说的不太一样,有的都给的<span style='color:red;'>sss</span>返回,试了很多次,去火狐浏览器
查看元素发现,<td style='<span style='color:red;'>sss</span>'></td>这样了,
所以加颜色的话,只返回 color:red;这样即可,不要想当然哦!
接下来说一下获取行问题,其实啊,上面说了一点问题了,也是比较坑的,我是研究一个java童鞋说的源码的判断问题,才解决的
当然啦,非常感谢那位大神啊救我于水火之中
function GetSelectedRows() { //idField 注意此字段要绑定的话必须是数据库自增的或者不重复数据的列,不然只能或许第一列值 var ss = []; var rows = $('#datagrid').datagrid('getSelections');//选中的多行 //var rows = $('#datagrid').datagrid('getSelected');单行的 for (var i = 0; i < rows.length; i++) { var row = rows[i]["moveid"];//1获取行的值 //var row = rows[i].moveid;//2获取行的值 alert(row); } }
获取选中行的数据问题,在强调一下idField-------绑定的问题,引发的问题,就是获取多行的值时候,都是一个第一行的值,不会循环得到所有行,这个值呢跟当前页选中也数据也是有关系的,所以慎重对待它哦
解析一下为什么,因为绑定一列数据有可能重复的数据的话,当选中多行的时候,它认为你选中的都是一样的数据,因为idField它绑定的数据重复了,即一样的行
接下来就是查询了
//绑定查询按钮的的点击事件 function BindSearchEvent() { //按条件进行查询数据,首先我们得到数据的值 $("#btnSearch").click(function () { //取值有几种方式:$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val() var queryParams = { IdOrName: $(".easyui-textbox").val(), } //将值传递给 InitGrid(queryParams); return false; }); }
这个呢等于说是重新绑定了一下,获取有什么reload什么的,也可以做到吧没去研究,既然封装了,就传参数进去重新调用了一下,效果都一样,上面注释获取值的方法也写了。
好久不写心得和研究这么东西了,感觉写起来还挺费劲,也是项目用到这个,花时间一天时间研究一下,趁加班,整理了一下,希望可以给初学的同行,一点点指导,少走一些弯路,少花费一些时间,让你的领导对你刮目相看
在很短时间内去适应,搞定一个东东,里面还有很多东西没去研究,比如动态 行编辑,增加,删除,以后用到再继续更新吧,祝大家新年快乐!
相关文章推荐
- jquery.easyui使用详解,和遇到的问题,提供大家在使用的时候少走弯路(二)
- 在做动态添加删除行的时候,使用jquery遇到的问题:$("#participantList tr").eq(i).remove();
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- 这是在开发的时候经常会遇到的问题希望对大家有所帮助
- 使用IdHttp获取网页代码出现的问题,只能得到部分代码,为什么,请大家帮忙
- 在使用JES8的时候遇到的一个问题
- 使用WebServices时候遇到“基础连接以关闭”的问题
- 使用session时候,遇到的一个问题(请求解决方法)
- 详解2016 cocoapods的安装和使用以及版本升级遇到的问题
- 使用mysql可视化工具mysql-front的时候遇到软件过期问题
- [原]ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI 的界面错位
- 在使用SSH框架整合新闻发布系统时候遇到的问题的解决
- 在使用Asp.net制作网站的时候遇到的问题(二)
- 使用ubuntu x86_64位元编译Android代码遇到的library问题(solved)
- asp.net Ajax 页中使用jquery-easyui的显示问题处理
- ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
- 解决VMWARE磁盘共享的问题(原创,希望兄弟们在遇到类似问题的时候少走弯路)
- 使用sybase 时候遇到的问题
- ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
- 使用mysql可视化工具mysql-front的时候遇到软件过期问题