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

<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>