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",{
  index:0,
  data:{
      "col1":"列1数据",
      "col2":"列2数据"
     }
});

checkRow

行索引

使指定行选中

$("#dg").sldatagrid("checkRow",0);

unselectAll

取消当前页所有行的选中状态

$("#dg").sldatagrid("unselectAll");

getRow

index

所有指定行数据

返回行数据

$("#dg").sldatagrid("getRow",0);

jQuery之自定义datagrid控件的更多相关文章

  1. 演练:使用属性自定义 DataGrid 控件

    演练:使用属性自定义 DataGrid 控件 Silverlight   此主题尚未评级 - 评价此主题   Silverlight DataGrid 控件支持常用表格式设置选项,例如交替显示不同的行 ...

  2. WPF 自定义DataGrid控件样式

    内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html 一.DataGrid基本样式(一) 小刚已经把Dat ...

  3. jQuery之自定义pagination控件

    slpagination 效果: slpagination.js (function($) { $.fn.slpagination = function(options, params) { if ( ...

  4. WPF 4 DataGrid 控件(自定义样式篇)

    原文:WPF 4 DataGrid 控件(自定义样式篇)      在<WPF 4 DataGrid 控件(基本功能篇)>中我们已经学习了DataGrid 的基本功能及使用方法.本篇将继续 ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度

    在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...

  6. winform中DataGrid控件的宽度设置

    最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找 ...

  7. javascript实例学习之六—自定义日历控件

    基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

    EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...

随机推荐

  1. kubernetes删除pod失败

    一.概述 k8s中删除pod失败,可能是该pod有rc,rs上层控制,而且很有可能,所以删除上层对应的rc,rs,deployment即可: 删除的方法: 1.直接删除rc,rs,deployment ...

  2. C# 自定义控件,日期时间选择输入插件

    权声明:本文为博主原创文章,未经博主允许不得转载. // 为textBox1添加一个日期时间选择控件 DateTimeChoser.AddTo(textBox1); DateTimeChoser.De ...

  3. 【Struts2】Struts2获取session的三种方式

    1.Map<String,Object> map =  ActionContext.getContext().getSession(); 2.HttpSession session = S ...

  4. iOS UTI

    UTI全拼Uniform Type Identifier,直接翻译过来就是统一类型标示符. 这个东西可以实现的功能就是设备之间或者app之间的文件传输. 有兴趣的领个支付宝红包再走, ^_^ 全套相关 ...

  5. struts2 标签变形和 样式class无效 问题解决方法

    在jsp使用Struts2标签的时候会发现,出现严重变形问题. <s:textfield type="text" name="username" labe ...

  6. Runway for Mac(UML 流程图绘图工具)破解版安装

    1.软件简介    Runway 是 macOS 系统上一款强大实用的软件开发工具,Runway for Mac 是一个界面简单功能强大的UML设计师.此外,Runway for Mac 带给你所有你 ...

  7. 用GDI+DrawImage画上去的图片会变大

    问题: 用GDI+DrawImage画上去的图片会变大 解释: Status DrawImage(Image *image,const Point &point);两参数的这个接口是这么设计的 ...

  8. 关于QueryCache的一次打脸

    [背景问题] 前一段时间给一套MySQL数据库加上了监控,运行一段时间后有人反馈监控到的insert,update,delete,select的数量中select的数量有像比 本应该的量少了不少! 我 ...

  9. 请教Mysql如何删除 不包含 某些字符的记录

    删除包含指定字符的记录 delete from `表` where `字段` like '%指定字符1%' or like '%指定字符2%' or like '%指定字符3%' 删除不包含指定字符的 ...

  10. SecureCRT中使用 rz 上传文件 遇到 rz: command not found 的解决办法

    -bash: rz: command not foundrz命令没找到?执行sz,同样也没找到. 安装lrzsz: # yum -y install lrzsz 现在就可以正常使用rz.sz命令上传. ...