博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
jQuery之自定义datagrid控件
阅读量：6581 次
发布时间：2019-06-24

本文共 19216 字，大约阅读时间需要 64 分钟。

sldatagrid

效果：

sldatagrid.js

1 (function($) {  2     function loadColumns(sldatagrid, columns) {  3         $(sldatagrid).empty();  4         $(sldatagrid).append("");  5         var thead = $("thead", sldatagrid);  6         var tr = $("tr", thead);  7         $.each(columns, function(i, n) {  8             var settings = {};  9             $.extend(settings, $.fn.sldatagrid.column, n); 10             if (settings.html == "") { 11                 if (settings.field == "ck") { 12                     $("").data("settings", settings).appendTo(tr); 13                     $("", { 14                         type : 'checkbox', 15                         click : function() { 16                             if (!$(sldatagrid).data("settings").singleSelect) { 17                                 if (this.checked) { 18                                     $.each(thead.next().children(), function() { 19                                         $(this).addClass("sldatagrid-row-selected"); 20                                         $("td :checkbox", this).attr("checked", "checked"); 21                                     }); 22                                 } else { 23                                     $.each(thead.next().children(), function() { 24                                         $(this).removeClass("sldatagrid-row-selected"); 25                                         $("td :checkbox", this).removeAttr("checked"); 26                                     }); 27                                 } 28                             } else { 29                                 return false; 30                             } 31                         } 32                     }).appendTo($("th", tr)); 33                 } else { 34                     if (settings.hidden) { 35                         $("" + settings.title + "").data("settings", settings).appendTo(tr); 36                     } else { 37                         $("" + settings.title + "").data("settings", settings).appendTo(tr); 38                     } 39                 } 40             } else { 41                 $("" + settings.title + "").data("settings", settings).appendTo(tr); 42             } 43         }); 44     } 45     function loadDatas(sldatagrid, datas) { 46         $("tbody", sldatagrid).remove(); 47         $(sldatagrid).append(""); 48         var thead = $("thead", sldatagrid); 49         var theadtr = $("tr", thead); 50         var tbody = $("tbody", sldatagrid); 51         $.each(datas, function(i, n) { 52             n.ck = false; 53             var tr = $("", { 54                 mouseenter : function() { 55                     if (!$(this).hasClass("sldatagrid-row-selected")) { 56                         $(this).addClass("sldatagrid-row-enter"); 57                     } 58                     $(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length; 59                 }, 60                 mouseleave : function() { 61                     $(this).removeClass("sldatagrid-row-enter"); 62                 }, 63                 click : function() { 64                 } 65             }).data("bindData", n).appendTo(tbody); 66             $("th", theadtr).each(function() { 67                 var field = $(this).attr('field'); 68                 if ($(this).data("settings").hidden) { 69                     $("", { 70                         "class" : "sldatagrid-row-cell", 71                         style : "display:none;", 72                         click : function() { 73                         } 74                     }).text(n[field]).appendTo(tr); 75                 } else { 76                     if ($(this).data("settings").html == undefined || $(this).data("settings").html.length == 0) { 77                         if (field == "ck") { 78                             $("").appendTo(tr); 79                             $("", { 80                                 type : "checkbox", 81                                 click : function() { 82                                     if (!$(sldatagrid).data("settings").singleSelect) { 83                                         tr.toggleClass("sldatagrid-row-selected"); 84                                         if (tr.hasClass("sldatagrid-row-selected")) { 85                                             $("td :checkbox", tr).attr("checked", "checked"); 86                                         } else { 87                                             $("td :checkbox", tr).removeAttr("checked"); 88                                         } 89                                         if ($("tr td input:checked", tbody).length == $("tr", tbody).length) { 90                                             $(":checkbox", theadtr).attr("checked", "checked"); 91                                         } else { 92                                             $(":checkbox", theadtr).removeAttr("checked"); 93                                         } 94                                     } else { 95                                         if (!tr.hasClass("sldatagrid-row-selected")) { 96                                             $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked"); 97                                             $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected"); 98                                             tr.addClass("sldatagrid-row-selected"); 99                                             $("td :checkbox", tr).attr("checked", "checked");100                                         } else {101                                             return false;102                                         }103                                     }104                                 }105                             }).appendTo($("td", tr));106                         } else {107                             $("", {108                                 "class" : "'sldatagrid-row-cell",109                                 click : function() {110                                     if (!$(sldatagrid).data("settings").singleSelect) {111                                         $(this).parent().toggleClass("sldatagrid-row-selected");112                                         if ($(this).parent().hasClass("sldatagrid-row-selected")) {113                                             $("td :checkbox", $(this).parent()).attr("checked", "checked");114                                         } else {115                                             $("td :checkbox", $(this).parent()).removeAttr("checked");116                                         }117                                         if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {118                                             $(":checkbox", theadtr).attr("checked", "checked");119                                         } else {120                                             $(":checkbox", theadtr).removeAttr("checked");121                                         }122                                     } else {123                                         if (!$(this).parent().hasClass("sldatagrid-row-selected")) {124                                             $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");125                                             $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");126                                             tr.addClass("sldatagrid-row-selected");127                                             $("td :checkbox", tr).attr("checked", "checked");128                                         }129                                     }130                                 }131                             }).text(n[field]).appendTo(tr);132                         }133                     } else {134                         $("", {135                             "class" : "sldatagrid-row-custom",136                             click : function() {137 138                             }139                         }).appendTo(tr).html($(this).data("settings").html);140                     }141                 }142             });143         });144     }145     function insertData(sldatagrid, index, data) {146         var thead = $("thead", sldatagrid);147         var theadtr = $("tr", thead);148         var tbody = $("tbody", sldatagrid);149         var tr = $("", {150             mouseenter : function() {151                 if (!$(this).hasClass("sldatagrid-row-selected")) {152                     $(this).addClass("sldatagrid-row-enter");153                 }154                 $(sldatagrid).data("property").enterRowIndex = $(this).prevAll().length;155             },156             mouseleave : function() {157                 $(this).removeClass("sldatagrid-row-enter");158             },159             click : function() {160             }161         }).data("bindData", data);162         if ($("tr", tbody).length > 0) {163             $("tr", tbody).eq(index).before(tr);164         } else {165             tbody.append(tr);166         }167         $("th", theadtr).each(function() {168             var field = $(this).attr('field');169             if ($(this).data("html") == undefined || $(this).data("html").length == 0) {170                 if (field == "ck") {171                     $("").appendTo(tr);172                     $("", {173                         type : "checkbox",174                         click : function() {175                             if (!$(sldatagrid).data("settings").singleSelect) {176                                 tr.toggleClass("sldatagrid-row-selected");177                                 if (tr.hasClass("sldatagrid-row-selected")) {178                                     $("td :checkbox", tr).attr("checked", "checked");179                                 } else {180                                     $("td :checkbox", tr).removeAttr("checked");181                                 }182                                 if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {183                                     $(":checkbox", theadtr).attr("checked", "checked");184                                 } else {185                                     $(":checkbox", theadtr).removeAttr("checked");186                                 }187                             } else {188                                 if (!tr.hasClass("sldatagrid-row-selected")) {189                                     $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");190                                     $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");191                                     tr.addClass("sldatagrid-row-selected");192                                     $("td :checkbox", tr).attr("checked", "checked");193                                 } else {194                                     return false;195                                 }196                             }197                         }198                     }).appendTo($("td", tr));199                 } else {200                     $("", {201                         "class" : "'sldatagrid-row-cell",202                         click : function() {203                             if (!$(sldatagrid).data("settings").singleSelect) {204                                 $(this).parent().toggleClass("sldatagrid-row-selected");205                                 if ($(this).parent().hasClass("sldatagrid-row-selected")) {206                                     $("td :checkbox", $(this).parent()).attr("checked", "checked");207                                 } else {208                                     $("td :checkbox", $(this).parent()).removeAttr("checked");209                                 }210                                 if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {211                                     $(":checkbox", theadtr).attr("checked", "checked");212                                 } else {213                                     $(":checkbox", theadtr).removeAttr("checked");214                                 }215                             } else {216                                 if (!$(this).parent().hasClass("sldatagrid-row-selected")) {217                                     $("td :checkbox", $("tr.sldatagrid-row-selected", tbody)).removeAttr("checked");218                                     $("tr.sldatagrid-row-selected", tbody).removeClass("sldatagrid-row-selected");219                                     tr.addClass("sldatagrid-row-selected");220                                     $("td :checkbox", tr).attr("checked", "checked");221                                 }222                             }223                         }224                     }).text(data[field]).appendTo(tr);225                 }226             } else {227                 $("", {228                     "class" : "sldatagrid-row-custom",229                     click : function() {230 231                     }232                 }).appendTo(tr).html($(this).data("settings").html);233             }234         });235     }236     function checkRow(sldatagrid, index) {237         var tr = $("tbody tr", sldatagrid);238         if ($(sldatagrid).data("settings").singleSelect) {239             tr.removeClass("sldatagrid-row-selected");240             $("td :checkbox", tr).removeAttr("checked");241         }242         tr = tr.eq(index);243         tr.addClass("sldatagrid-row-selected");244         $("td :checkbox", tr).attr("checked", "checked");245     }246     function unselectAll(sldatagrid) {247         var tr = $("tbody tr", sldatagrid);248         tr.removeClass("sldatagrid-row-selected");249         $("td :checkbox", tr).removeAttr("checked");250     }251     $.fn.sldatagrid = function(options, params) {252         if ($.type(options) == "string") {253             var method = $.fn.sldatagrid.methods[options];254             if (method) {255                 return method(this, params);256             } else {257                 return null;258             }259         }260         var settings = {};261         $.extend(settings, $.fn.sldatagrid.defaults, options);262         $(this).data("settings", settings).data("property", $.fn.sldatagrid.property);263         $(this).attr({264             border : 0,265             cellpadding : 0,266             cellspacing : 0,267             "class" : settings.cssClass,268             style : settings.style269         });270         if (settings.columns) {271             loadColumns(this, settings.columns);272         }273         if (settings.datas) {274             loadDatas(this, settings.datas);275         }276     };277     $.fn.sldatagrid.methods = {278         getClickRow : function(sldatagrid) {279             return $("tbody tr", sldatagrid).eq($(sldatagrid).data("property").enterRowIndex).data("bindData");280         },281         getSelectedRows : function(sldatagrid) {282             var selectedRows = new Array();283             $("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {284                 selectedRows[i] = $(this).data("bindData");285             });286             return selectedRows;287         },288         loadColumns : function(sldatagrid, columns) {289             loadColumns(sldatagrid, columns);290         },291         loadDatas : function(sldatagrid, datas) {292             loadDatas(sldatagrid, datas);293         },294         insertData : function(sldatagrid, params) {295             insertData(sldatagrid, params.index, params.data);296         },297         checkRow : function(sldatagrid, index) {298             checkRow(sldatagrid, index);299         },300         unselectAll : function(sldatagrid) {301             unselectAll(sldatagrid);302         },303         getRow : function(sldatagrid, index) {304             return $("tbody tr", sldatagrid).eq(index).data("bindData");305         }306     };307     $.fn.sldatagrid.property = {308         enterRowIndex : -1309     };310     $.fn.sldatagrid.defaults = {311         cssClass : "sldatagrid",312         style : "",313         singleSelect : false,314         columns : undefined,315         datas : undefined316     };317     $.fn.sldatagrid.column = {318         title : "",319         field : "",320         hidden : false,321         align : "left",322         style : "",323         html : ""324     };325 })(jQuery);
View Code

sldatagrid.css

1 table,thead,tr,th,td,input { 2     margin: 0; 3     padding: 0; 4     font-family: verdana; 5     font-size: 12px; 6 } 7  8 .sldatagrid { 9     border: solid 1px #B4B4B4;10     border-collapse: collapse;11     margin: 1px 0 0 0;12 }13 14 .sldatagrid tr th {15     height: 27px;16     border: solid 1px #B4B4B4;17     background-color: #F4F4F4;18     word-break: keep-all;19     white-space: nowrap;20     padding: 1px 5px 1px 5px;21 }22 23 .sldatagrid tr td {24     height: 25px;25     border: solid 1px #B4B4B4;26     word-break: keep-all;27     white-space: nowrap;28     padding: 0 5px 0 5px;29 }30 31 .sldatagrid-header-check {32     width: 20px;33 }34 35 .sldatagrid-header-custom {36     width: auto;37 }38 39 .sldatagrid-header-cell {40     min-width: 50px;41 }42 43 .sldatagrid-row-check {44     width: 20px;45 }46 47 .sldatagrid-row-custom {48     49 }50 51 .sldatagrid-row-cell {52     padding: 0 5px 0 5px;53     width: auto;54 }55 56 .sldatagrid-row-selected {57     background-color: #FCFCB6;58 }59 60 .sldatagrid-row-enter {61     background-color: #DDFAFB;62 }
View Code

testsldatagrid.html

1  2  3  4 
       5  6 
       7  8  9 10 11     
      
       12     
      
13     58 59
View Code

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='编辑' οnclick='a()'/><input type='button' value='删除' οnclick='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);

转载地址：http://jnnno.baihongyu.com/

你可能感兴趣的文章
程序员的自我修养-----Java开发的必须知道的几个注意点
查看>>
jQuery对象与DOM对象之间的转换
查看>>
对象网站中全局信息的抽象（Web.Config）
查看>>
iis备份(MetaBase.xml)重装系统后快速恢复方法
查看>>
Remote Event Receivers in SharePoint 2013
查看>>
默认日志和配置文件路径
查看>>
webpack打包The 'mode' option has not been set,错误提示
查看>>
轻量级SSH终端 Mosh
查看>>
mybatis利用resultType方式实现数据库一对一查询
查看>>
Most Important Changes in Django 1.5 | Procrastinating Developer
查看>>
11月15日站立会议
查看>>
HashMap
查看>>
34 windows_34_Thread_Base 线程基础
查看>>
GNU编码标准
查看>>
OpenProj打开不了或者提示”Failed to load Java VM Library”的错误的解决方案
查看>>
在真实世界中观察目标治疗策略实施1年对初诊RA患者的影响
查看>>
Python (1) - 7 Steps to Mastering Machine Learning With Python
查看>>
【洛谷】P1586 四方定理
查看>>
Python Revisited Day 05(模块)
查看>>
关于广/宽度优先搜索
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-01-23 03:29:29   当前IP: 3.17.174.204   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我