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格式的,其中的日期字段,在后台是正 ...
随机推荐
- git学习笔记（四）—— 分支管理
一.创建与合并分支 git branch //查看分支 git branch <name> //创建分支 git checkout <name> //切换分支 git chec ...
- 【Java】Swing中JTextPane中如何绘制行号
Oracle在JTextPane类中并没有直接提供显示行号的方法,所以这个功能应该由程序员自己来完成,笔者发现网上很多的显示行号的代码都存在一个问题,就是不准确,特别是在行数变多了以后. 笔者先贴出代 ...
- SQL plan directives
SQL plan directives SQL plan directives含有优化器产生优化的执行计划时需要的附加信息和指令. 在sql执行时,如果cardinality估计有错误,数据库就会创建 ...
- java操作redis。jedis使用api
package com.wujintao.redis; import java.util.Date; import java.util.HashMap; import java.util.Iterat ...
- c#asp.net url 传递中文参数要使用 System.Web.HttpUtility.UrlEncode 而不能使用Server.UrlEncode
最近网站里的参数包括中文的例如: http://www.taiba/Tag%b0%ae%c7%e9.html 已开始使用 Server.UrlEncode来做的,但发现,有一些中文在url重写的是说找 ...
- Java Date and Calendar examples
Java Date and Calendar examples This tutorial shows you how to work with java.util.Date and java.uti ...
- SpringApplication初始化
SpringApplication: private void initialize(Object[] sources) { if (sources != null && source ...
- Android Studio开发-高效插件强烈推荐
Android Studio开发-高效插件强烈推荐 现在Android的开发者基本上都使用Android Studio进行开发(如果你还在使用eclipse那也行,毕竟你乐意怎么样都行).使用好And ...
- MongoDB联合查询 -摘自网络
1.简单手工关联 首先将结果查询出来放到一个变量里面,然后再查询 u = db.user.findOne({author:"wangwenlong"}); for(var p = ...
- 一种解决新版本API完全兼容老版本API的方法
原文:http://android.eoe.cn/topic/android_sdk 这节课程我们讨论如何创建一个实现类,即能对应新版本的API,又能够保持对老版本API的支持. * 寻找一个替代的解 ...