JS关键字变色实现思路及代码


Posted in Javascript onFebruary 21, 2013

1.替换关键字,对字体变色

public static string ReplaceRed(string strtitle, string redkey) 
{ 
if (redkey == "" || redkey == null) 
{ 
return strtitle; 
} 
else 
strtitle = strtitle.Replace(redkey, " <font color='#ff0000'>" + redkey + " </font>"); 
return strtitle; 
}

该方法缺点是:点字符是含大小写的英文时,变色后统一替换为了关键字的大小写,体验不好。
2.用正则,CSS背景变色
protected string HighlightText(string inputText,string searchWord) 
{ 
System.Text.RegularExpressions.Regex expression = new System.Text.RegularExpressions.Regex(searchWord.Replace(" ", "|"), System.Text.RegularExpressions.RegexOptions.IgnoreCase); 
return expression.Replace(inputText,new System.Text.RegularExpressions.MatchEvaluator(ReplaceKeywords)); 
} 
public string ReplaceKeywords(System.Text.RegularExpressions.Match m) 
{ 
return "<span class='highlightTxtSearch'>" + m.Value + "</span>";//关键字背景加色 
//return "<font color='#ff0000'>" + m.Value + "</font>";//关键字变色 
}

该方法可结合前台JS调用
<style type="text/css"> 
.highlightTxtSearch 
{ 
background-color:Yellow; 
} 
</style>

<script type="text/javascript"> 
$(function () { 
$('#tt').datagrid({ 
url: '@Url.Content("~/Domain/LoadDomainAdmin")', 
width: "90%", 
height: 400, 
fitColumns: true, 
nowrap: false, 
idField: 'UserID', 
pagination: true, 
pageNumber: 1, 
singleSelect: true, 
frozenColumns: [[{ field: 'radio', formatter: function (value, row, index) { 
return '<input type="radio" name="rd_action" />'; 
} 
}]], 
columns: [[ 
{ field: 'UserID', title: 'UserID', width: 260, hidden: 'true' }, 
{ field: 'LoginName', title: '@ViewBag.LoginName', width: 180, align: 'left', formatter: function (data) { 
//return "<div class='hiddenFontGommom' style='text-align:left;'>" + data + "</div>"; 
return GetNewData(data); 
} 
}, 
{ field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', formatter: function (data) { 
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
return GetNewData(data); 
// var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
// if (keyword == "") { 
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
// } 
// else { 
// var returnData = ""; 
// $.ajax({ 
// type: "POST", 
// url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword, 
// async: false, 
// success: function (newdata) { 
// //重新赋值 
// returnData = newdata; 
// }, 
// error: function () { 
// //不修改returnData值 
// } 
// }); 
// return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>"; 
// } 
} 
}, 
{ field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left', formatter: function (data) { 
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
return GetNewData(data); 
} 
}, 
{ field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) { 
return "<div class='hiddenFontGommom' style='text-align:left;' title=" + data + ">" + data + "</div>"; 
} 
}, 
// { field: 'Domian', title: '@ViewBag.Domian', width: 180, align: 'left', formatter: function (data) { 
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
// } 
// }, 
// { field: 'Role', title: '@ViewBag.Role', width: 180, align: 'left', formatter: function (data) { 
// return "<div style='text-align:left;' class='hiddenFontGommom' title=" + data.replace(" ", "").replace(" ", "") + ">" + data + "</div>"; 
// } 
// }, 
// {field: 'IsEnabled', title: '@ViewBag.State', align: 'center', width: 150, formatter: function (val) { 
// if (val == true) 
// return "<div class='devicetypes_a_box'>True</div>"; 
// else 
// return "<div class='devicetypes_a_box'>False</div>"; 
// } 
// } 
]], 
onBeforeLoad: function (row, param) { 
//移除头部批量勾选框 
$(".datagrid-header-check input").css("visibility", "hidden"); 
//隐藏分页 
//$(".datagrid-pager").css("display", "none"); 
//$(".datagrid-pager").removeClass("datagrid-pager"); 
return true; 
}, 
onLoadSuccess: function (data) { 
if (data.rows.length == 0) { 
$(".datagrid-view2 .datagrid-body").html("<div style='text-align:center; margin-top:0px; height:50px;'>" + userManage_index_SearchMsg + "</div>"); 
} 
else { 
$('#tt').datagrid('selectRecord', '@ViewBag.AdminId'); 
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked"); 
} 
$("div.datagrid-header-check input").removeAttr("checked"); //重新加载时去掉复选框的选中 
//$('#tt').datagrid('unselectAll'); 
var queryParams = $('#tt').datagrid('options').queryParams; 
queryParams.IsSerach = "NO"; 
queryParams.DomainId = $("#xDomainId").val(); 
$('#tt').datagrid('options').queryParams = queryParams; 
}, 
// onSelect: function () { 
// ChSelect(); 
// }, 
// onUnselect: function () { 
// ChSelect(); 
// }, 
onClickRow: function (row) { 
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked"); 
} 
}); 
var p = $('#tt').datagrid('getPager'); 
$(p).pagination({ 
pageNumber: 1, 
pageSize: 10, //每页显示的记录条数,默认为10 
pageList: [5, 10, 15], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {from} - {to} 条记录 共 {total} 条记录', 
}); 
$("#btn_search").click(function () { 
$("#importErrorMsg").find("div").css("display", "none"); 
var queryParams = $('#tt').datagrid('options').queryParams; 
queryParams.FullName = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
queryParams.IsSerach = "YES"; 
$('#tt').datagrid('options').queryParams = queryParams; 
$("#tt").datagrid('reload'); 
var p = $('#tt').datagrid('getPager'); 
$(p).pagination({ 
pageNumber: 1, 
pageList: [5, 10, 15], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {from} - {to} 条记录 共 {total} 条记录', 
}); 
}) 
$(".pagination-num").keydown(function (event) { 
var event = event || window.event; 
if (event.keyCode == 13) 
event.keyCode = 9; 
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && (event.keyCode < 96 || event.keyCode > 105)) { 
event.preventDefault(); 
event.returnValue = false; 
} 
}); 
$(".datagrid-cell").css("textAlign", "center"); //表头内容居中 
}); 
function ChSelect() { 
// var row = $('#tt').datagrid('getChecked'); 
// var rows = $('#tt').datagrid('getRows'); 
// row.length == rows.length ? $("div.datagrid-header-check input").attr("checked", true) : $("div.datagrid-header-check input").removeAttr("checked"); 
} 
function GetNewData(data) { 
var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
if (keyword == "") { 
return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
} 
else { 
var returnData = ""; 
$.ajax({ 
type: "POST", 
url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword, 
async: false, 
success: function (newdata) { 
//重新赋值 
returnData = newdata; 
}, 
error: function () { 
//不修改returnData值 
} 
}); 
return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>"; 
//title中的data要和后面的data分开,不要后台返回的会让title中的data也跟着改变 
} 
} 
</script>
Javascript 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS变量及其作用域
Mar 29 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
js数组Array sort方法使用深入分析
Feb 21 #Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 #Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 #Javascript
javascript通过class来获取元素实现代码
Feb 20 #Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 #Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 #Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 #Javascript
You might like
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
理解javascript回调函数
2014/12/28 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Python实现简单猜数字游戏
2021/02/03 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
煤矿安全生产月活动总结
2014/07/05 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏