您的位置:首页 > Web前端 > JQuery

jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)

2015-02-03 19:31 567 查看
初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到

引用的文件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什么的,也可以做到吧没去研究,既然封装了,就传参数进去重新调用了一下,效果都一样,上面注释获取值的方法也写了。

好久不写心得和研究这么东西了,感觉写起来还挺费劲,也是项目用到这个,花时间一天时间研究一下,趁加班,整理了一下,希望可以给初学的同行,一点点指导,少走一些弯路,少花费一些时间,让你的领导对你刮目相看

在很短时间内去适应,搞定一个东东,里面还有很多东西没去研究,比如动态 行编辑,增加,删除,以后用到再继续更新吧,祝大家新年快乐!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐