jQuery之自定义datagrid控件
sldatagrid
效果：
sldatagrid.js
(function($) {
function loadColumns(sldatagrid, columns) {
$(sldatagrid).empty();
$(sldatagrid).append("<thead><tr></tr></thead><tbody></tbody>");
var thead = $("thead", sldatagrid);
var tr = $("tr", thead);
$.each(columns, function(i, n) {
var settings = {};
$.extend(settings, $.fn.sldatagrid.column, n);
if (settings.html == "") {
if (settings.field == "ck") {
$("<th class='sldatagrid-header-check' field='ck' align='center' style='" + settings.style + "'></th>").data("settings", settings).appendTo(tr);
$("<input>", {
type : 'checkbox',
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
if (this.checked) {
$.each(thead.next().children(), function() {
$(this).addClass("sldatagrid-row-selected");
$("td :checkbox", this).attr("checked", "checked");
});
} else {
$.each(thead.next().children(), function() {
$(this).removeClass("sldatagrid-row-selected");
$("td :checkbox", this).removeAttr("checked");
});
}
} else {
return false;
}
}
}).appendTo($("th", tr));
} else {
if (settings.hidden) {
$("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + ";display:none;'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
} else {
$("<th class='sldatagrid-header-cell' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
}
}
} else {
$("<th class='sldatagrid-header-custom' field='" + settings.field + "' align='" + settings.align + "' style='" + settings.style + "'>" + settings.title + "</th>").data("settings", settings).appendTo(tr);
}
});
}
function loadDatas(sldatagrid, datas) {
$("tbody", sldatagrid).remove();
$(sldatagrid).append("<tbody></tbody>");
var thead = $("thead", sldatagrid);
var theadtr = $("tr", thead);
var tbody = $("tbody", sldatagrid);
$.each(datas, function(i, n) {
n.ck = false;
var tr = $("<tr>", {
mouseenter : function() {
if (!$(this).hasClass("sldatagrid-row-selected")) {
$(this).addClass("sldatagrid-row-enter");
}
$(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
},
mouseleave : function() {
$(this).removeClass("sldatagrid-row-enter");
},
click : function() {
}
}).data("bindData", n).appendTo(tbody);
$("th", theadtr).each(function() {
var field = $(this).attr('field');
if ($(this).data("settings").hidden) {
$("<td>", {
"class" : "sldatagrid-row-cell",
style : "display:none;",
click : function() {
}
}).text(n[field]).appendTo(tr);
} else {
if ($(this).data("settings").html == undefined || $(this).data("settings").html.length == 0) {
if (field == "ck") {
$("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
$("<input>", {
type : "checkbox",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
tr.toggleClass("sldatagrid-row-selected");
if (tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", tr).attr("checked", "checked");
} else {
$("td :checkbox", tr).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
} else {
return false;
}
}
}
}).appendTo($("td", tr));
} else {
$("<td>", {
"class" : "'sldatagrid-row-cell",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
$(this).parent().toggleClass("sldatagrid-row-selected");
if ($(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $(this).parent()).attr("checked", "checked");
} else {
$("td :checkbox", $(this).parent()).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
}
}
}).text(n[field]).appendTo(tr);
}
} else {
$("<td>", {
"class" : "sldatagrid-row-custom",
click : function() {
}
}).appendTo(tr).html($(this).data("settings").html);
}
}
});
});
}
function insertData(sldatagrid, index, data) {
var thead = $("thead", sldatagrid);
var theadtr = $("tr", thead);
var tbody = $("tbody", sldatagrid);
var tr = $("<tr>", {
mouseenter : function() {
if (!$(this).hasClass("sldatagrid-row-selected")) {
$(this).addClass("sldatagrid-row-enter");
}
$(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;
},
mouseleave : function() {
$(this).removeClass("sldatagrid-row-enter");
},
click : function() {
}
}).data("bindData", data);
if ($("tr", tbody).length > 0) {
$("tr", tbody).eq(index).before(tr);
} else {
tbody.append(tr);
}
$("th", theadtr).each(function() {
var field = $(this).attr('field');
if ($(this).data("html") == undefined || $(this).data("html").length == 0) {
if (field == "ck") {
$("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
$("<input>", {
type : "checkbox",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
tr.toggleClass("sldatagrid-row-selected");
if (tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", tr).attr("checked", "checked");
} else {
$("td :checkbox", tr).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!tr.hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
} else {
return false;
}
}
}
}).appendTo($("td", tr));
} else {
$("<td>", {
"class" : "'sldatagrid-row-cell",
click : function() {
if (!$(sldatagrid).data("settings").singleSelect) {
$(this).parent().toggleClass("sldatagrid-row-selected");
if ($(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $(this).parent()).attr("checked", "checked");
} else {
$("td :checkbox", $(this).parent()).removeAttr("checked");
}
if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
$(":checkbox", theadtr).attr("checked", "checked");
} else {
$(":checkbox", theadtr).removeAttr("checked");
}
} else {
if (!$(this).parent().hasClass("sldatagrid-row-selected")) {
$("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");
$("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
}
}
}).text(data[field]).appendTo(tr);
}
} else {
$("<td>", {
"class" : "sldatagrid-row-custom",
click : function() {
}
}).appendTo(tr).html($(this).data("settings").html);
}
});
}
function checkRow(sldatagrid, index) {
var tr = $("tbody tr", sldatagrid);
if ($(sldatagrid).data("settings").singleSelect) {
tr.removeClass("sldatagrid-row-selected");
$("td :checkbox", tr).removeAttr("checked");
}
tr = tr.eq(index);
tr.addClass("sldatagrid-row-selected");
$("td :checkbox", tr).attr("checked", "checked");
}
function unselectAll(sldatagrid) {
var tr = $("tbody tr", sldatagrid);
tr.removeClass("sldatagrid-row-selected");
$("td :checkbox", tr).removeAttr("checked");
}
$.fn.sldatagrid = function(options, params) {
if ($.type(options) == "string") {
var method = $.fn.sldatagrid.methods[options];
if (method) {
return method(this, params);
} else {
return null;
}
}
var settings = {};
$.extend(settings, $.fn.sldatagrid.defaults, options);
$(this).data("settings", settings).data("property", $.fn.sldatagrid.property);
$(this).attr({
border : 0,
cellpadding : 0,
cellspacing : 0,
"class" : settings.cssClass,
style : settings.style
});
if (settings.columns) {
loadColumns(this, settings.columns);
}
if (settings.datas) {
loadDatas(this, settings.datas);
}
};
$.fn.sldatagrid.methods = {
getClickRow : function(sldatagrid) {
return $("tbody tr", sldatagrid).eq($(sldatagrid).data("property").enterRowIndex).data("bindData");
},
getSelectedRows : function(sldatagrid) {
var selectedRows = new Array();
$("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {
selectedRows[i] = $(this).data("bindData");
});
return selectedRows;
},
loadColumns : function(sldatagrid, columns) {
loadColumns(sldatagrid, columns);
},
loadDatas : function(sldatagrid, datas) {
loadDatas(sldatagrid, datas);
},
insertData : function(sldatagrid, params) {
insertData(sldatagrid, params.index, params.data);
},
checkRow : function(sldatagrid, index) {
checkRow(sldatagrid, index);
},
unselectAll : function(sldatagrid) {
unselectAll(sldatagrid);
},
getRow : function(sldatagrid, index) {
return $("tbody tr", sldatagrid).eq(index).data("bindData");
}
};
$.fn.sldatagrid.property = {
enterRowIndex : -1
};
$.fn.sldatagrid.defaults = {
cssClass : "sldatagrid",
style : "",
singleSelect : false,
columns : undefined,
datas : undefined
};
$.fn.sldatagrid.column = {
title : "",
field : "",
hidden : false,
align : "left",
style : "",
html : ""
};
})(jQuery);
sldatagrid.css
table,thead,tr,th,td,input {
margin:;
padding:;
font-family: verdana;
font-size: 12px;
}
.sldatagrid {
border: solid 1px #B4B4B4;
border-collapse: collapse;
margin: 1px 0 0 0;
}
.sldatagrid tr th {
height: 27px;
border: solid 1px #B4B4B4;
background-color: #F4F4F4;
word-break: keep-all;
white-space: nowrap;
padding: 1px 5px 1px 5px;
}
.sldatagrid tr td {
height: 25px;
border: solid 1px #B4B4B4;
word-break: keep-all;
white-space: nowrap;
padding: 0 5px 0 5px;
}
.sldatagrid-header-check {
width: 20px;
}
.sldatagrid-header-custom {
width: auto;
}
.sldatagrid-header-cell {
min-width: 50px;
}
.sldatagrid-row-check {
width: 20px;
}
.sldatagrid-row-custom {
}
.sldatagrid-row-cell {
padding: 0 5px 0 5px;
width: auto;
}
.sldatagrid-row-selected {
background-color: #FCFCB6;
}
.sldatagrid-row-enter {
background-color: #DDFAFB;
}
testsldatagrid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="sldatagrid.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="sldatagrid.js"></script>
</head>
<body>
<table id="sl">
</table>
<script type="text/javascript">
$(function() {
$("#sl").sldatagrid({
columns : [ {
field : "ck",
style : ""
}, {
title : "列1",
field : "col1",
align : "center",
style : "width:100px;"
}, {
title : "列2",
field : "col2",
align : "center",
style : "width:100px;"
}, {
title : "",
field : "op",
align : "center",
style : "",
html : "<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>"
} ],
datas : [ {
"col1" : "列1数据1",
"col2" : "列2数据1"
}, {
"col1" : "列1数据2",
"col2" : "列2数据2"
}, {
"col1" : "列1数据3",
"col2" : "列2数据3"
} ]
});
});
function a() {
var rowData = $("#sl").sldatagrid("getClickRow");
$.each(rowData, function(i, n) {
alert(i + ":" + n)
});
}
function b() {
var rowDatas = $("#sl").sldatagrid("getSelectedRows");
}
</script>
</body>
</html>
API文档
表格属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
| class | string | css样式 | sldatagrid |
| style | string | 应用到表格整体的样式 | width:auto; |
| singleSelect | bool | 如果为true，则只允许选择一行 | false |
| columns | array | 列配置对象 | undefined |
| datas | array | 数据 | undefined |
列属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
| title | string | 列标题 | 无 |
| field | string | 列字段（"ck"：checkbox列） | 无 |
| hidden | bool | 是否隐藏 | false |
| align | string | 水平位置（"center","left","right"） | "left" |
| style | string | 列样式 | 无 |
| html | string | 自定义html | 无 |
方法：
| 方法名 | 参数 | 返回值 | 描述 |
| getClickRow | 无 | 行数据对象 | var rowData=$("#sl").sldatagrid("getClickRow"); rowData： { "col1" : "列1数据1", "col2" : "列2数据1" } |
| getSelectedRows | 无 | 行数据对象数据 | var rowDatas=$("#sl").sldatagrid("getSelectedRows"); rowDatas： [ {"col1" : "列1数据1", "col2" : "列2数据1"}, {"col1" : "列1数据2", "col2" : "列2数据2"} ] |
| loadColumns | 列数据 | 无 | [{ field:"ck", style:"" },{ title:"列1", field:"col1", align:"center", style:"width:100px;" },{ title:"列2", field:"col2", align:"center", style:"width:100px;" },{ title:"", field:"", align:"center", style:"", html:"<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>" }] |
| loadDatas | 行数据 | 无 | [{ "col1":"列1数据1", "col2":"列2数据1" },{ "col1":"列1数据2", "col2":"列2数据2" }] |
| insertData |
{ index:索引, data:行数据 } |
无 |
$("#dg").sldatagrid("insertData",{ |
| checkRow |
行索引 |
无 |
使指定行选中 $("#dg").sldatagrid("checkRow",0); |
| unselectAll |
无 |
无 |
取消当前页所有行的选中状态 $("#dg").sldatagrid("unselectAll"); |
| getRow |
index |
所有指定行数据 |
返回行数据 $("#dg").sldatagrid("getRow",0); |
jQuery之自定义datagrid控件的更多相关文章
- 演练：使用属性自定义 DataGrid 控件
演练:使用属性自定义 DataGrid 控件 Silverlight 此主题尚未评级 - 评价此主题 Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...
- WPF 自定义DataGrid控件样式
内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html 一.DataGrid基本样式(一) 小刚已经把Dat ...
- jQuery之自定义pagination控件
slpagination 效果: slpagination.js (function($) { $.fn.slpagination = function(options, params) { if ( ...
- WPF 4 DataGrid 控件（自定义样式篇）
原文:WPF 4 DataGrid 控件(自定义样式篇) 在<WPF 4 DataGrid 控件(基本功能篇)>中我们已经学习了DataGrid 的基本功能及使用方法.本篇将继续 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
- winform中DataGrid控件的宽度设置
最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找 ...
- javascript实例学习之六—自定义日历控件
基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...
随机推荐
- kubernetes删除pod失败
一.概述 k8s中删除pod失败,可能是该pod有rc,rs上层控制,而且很有可能,所以删除上层对应的rc,rs,deployment即可: 删除的方法: 1.直接删除rc,rs,deployment ...
- C# 自定义控件，日期时间选择输入插件
权声明:本文为博主原创文章,未经博主允许不得转载. // 为textBox1添加一个日期时间选择控件 DateTimeChoser.AddTo(textBox1); DateTimeChoser.De ...
- 【Struts2】Struts2获取session的三种方式
1.Map<String,Object> map = ActionContext.getContext().getSession(); 2.HttpSession session = S ...
- iOS UTI
UTI全拼Uniform Type Identifier,直接翻译过来就是统一类型标示符. 这个东西可以实现的功能就是设备之间或者app之间的文件传输. 有兴趣的领个支付宝红包再走, ^_^ 全套相关 ...
- struts2 标签变形和 样式class无效 问题解决方法
在jsp使用Struts2标签的时候会发现,出现严重变形问题. <s:textfield type="text" name="username" labe ...
- Runway for Mac（UML 流程图绘图工具）破解版安装
1.软件简介 Runway 是 macOS 系统上一款强大实用的软件开发工具,Runway for Mac 是一个界面简单功能强大的UML设计师.此外,Runway for Mac 带给你所有你 ...
- 用GDI+DrawImage画上去的图片会变大
问题: 用GDI+DrawImage画上去的图片会变大 解释: Status DrawImage(Image *image,const Point &point);两参数的这个接口是这么设计的 ...
- 关于QueryCache的一次打脸
[背景问题] 前一段时间给一套MySQL数据库加上了监控,运行一段时间后有人反馈监控到的insert,update,delete,select的数量中select的数量有像比 本应该的量少了不少! 我 ...
- 请教Mysql如何删除 不包含 某些字符的记录
删除包含指定字符的记录 delete from `表` where `字段` like '%指定字符1%' or like '%指定字符2%' or like '%指定字符3%' 删除不包含指定字符的 ...
- SecureCRT中使用 rz 上传文件 遇到 rz: command not found 的解决办法
-bash: rz: command not foundrz命令没找到?执行sz,同样也没找到. 安装lrzsz: # yum -y install lrzsz 现在就可以正常使用rz.sz命令上传. ...