Home >Web Front-end >JS Tutorial >Beginner's Jquery plug-in production: the function of hiding some rows in the query screen of SageCRM_jquery

Beginner's Jquery plug-in production: the function of hiding some rows in the query screen of SageCRM_jquery

WBOY
WBOYOriginal
2016-05-16 17:57:481137browse

Solution:
1. Add a [—][ ] sign in the title for users to click.
2. The user's behavior of shrinking and expanding the screen is stored in Cookie. Even if the page is reloaded or the user logs back into the system, the user's behavior can still be remembered.
 
Advantages: 1. It is done in the form of Jquery plug-in, which is easy to expand. Easy to implement.
 2. The behavior saved in Cookie is easy to implement, reduces the workload, and can be accepted by users. If saved in the database, the page load will be increased.
Disadvantages: You cannot use separate behaviors for each page, that is: every user's contraction and expansion are global in the system. And after logging in to another computer or clearing the cache, the user's operations cannot be remembered.
 
First implement it using js function. Then change to Jquery plug-in: code

Copy code The code is as follows:

/*
* TableToggle 0.1
* Copyright (c) 2011 Novus_lee http://www.cnblogs.com/novus
* Date: 2011-12-23
* Function to hide some rows in SageCRM query screen
*/
(function($){
$.fn.TableToggle = function(options){
var defaults = {
plussrc : "/upload/201112/20111226224658296.gif", //--[ ] picture
minussrc : "/upload/201112/20111226224658809.gif",
line : 2
}
var options = $.extend(defaults, options);
var flip = 0, i = 0;
this.each(function(){
var $thisTable = $(this);
var claName = "btntoggle" i;
// --Add a picture button above the table
var $Title = $thisTable.parent().parent().parent().find("td.PANEREPEAT");
$Title.prepend("< ;a href='javascript:void(0);' class='" claName "' style='cursor:pointer;padding-right:10px;'>");
var trlen = $thisTable.find("tr").length;
options.line = (options.line > trlen ? trlen : options.line);
$Title.find("a." claName).click(function () {
$thisTable.find("tr:gt(" options.line ")").toggle (flip );
if (flip % 2 == 0)
{
$Title.find("img[src*='smallplus']").attr("src",options.minussrc );
$.cookie(claName, "plus");
}
else
{
$Title.find("img[src*='smallminus']").attr ("src",options.plussrc);
$.cookie(claName, "smallminus");
}
});
if ($.cookie(claName) == "smallminus" || $.cookie(claName) == "" || $.cookie(claName) == null)
{
$("a." claName).click();
}
i ;
});
};
})(jQuery);

The plug-in also calls a jquery Cookie plug-in.
Method called:
Copy code The code is as follows:





The effect is as shown below:

Shrink:

Expand:

PS: SageCRM only supports IE7 and IE8. So the plugin here does not test browser compatibility.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn