1 简单的demo
<!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">
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<title>jQuery Raty - A Star Rating Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.raty.js"></script>
</head>
<body>
<div id="fixed"></div>
</body>
<script type="text/javascript">
$(function() {
$('#fixed').raty({
readOnly: true,
start: 3.5,
showHalf: true,
});
});
</script>
</html>2 各种example
参见:http://testweb3.iecworld.com/jsdemo/js/lq_js_point/
3 自动生成任意的评价项
<!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">
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<title>jQuery Raty - A Star Rating Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.raty.js"></script>
</head>
<body>
<div id='content'>
<!--这里添加的是自动生成的评价项-->
</div>
</body>
<script type="text/javascript">
$(function() {
var arr=[3,2,4,5];//从数据库查询到的评分项
var arrid=['a','b','c'];//为每个评分项设置ID
var str ="";
//添加div
for(var i=0;i<arr.length;i++){
str+="<div id='"+arrid[i]+"'></div>";
}
$('#content').html(str);
//初始化raty
for(var i=0;i<arr.length;i++){
$("#"+arrid[i]).raty({
start: arr[i],
});
}
});
</script>
</html>
4 和dataTable的结合(回显)
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/portal/itsm/common/header.jsp"%>
<%@ include file="/portal/itsm/common/jsp/findselect.jsp"%>
<%@taglib uri="/itsm.tld" prefix="itsm"%>
<%@ page import="java.util.*"%>
<%@ page import="com.xuanyuan.itsm.demo.entity.ItsmDemo"%>
<%@ page import="com.xuanyuan.bpaf.common.config.URMSConfig"%>
<%
String appType = request.getParameter("appType");
String typeId = request.getParameter("typeId");
%>
<!DOCTYPE HTML>
<html>
<head>
<title><%=URMSConfig.getConfigValue("SYS_TITLE")%></title>
<link href="<%=path%>/style/css/xuanyuanui.css" rel="stylesheet"
type="text/css" />
<link href="<%=path%>/style/css/data-grid.css" rel="stylesheet"
type="text/css" />
<link href="<%=path%>/style/css/bootstrapValidator.min.css"
rel="stylesheet" type="text/css" />
<link href="<%=path%>/style/css/datetimepicker.css" rel="stylesheet" type="text/css" />
<!-- 弹出框 -->
<script type="text/javascript" src="<%=path%>/style/js/bootbox.min.js"></script>
</head>
<!-- Override feedback icon position -->
<body>
<div class="col-xs-12 col-sm-12 col-md-12 xuanyuan-col-12">
<!-- 菜单导航标签
<itsm:itsm_menunav menuCode="<%=appType %>" /> -->
<div class="panel panel-default xuanyuan-table">
<div class="panel-heading">
<div class="row">
<h3 class="panel-title col-xs-7">
<span class="glyphicon glyphicon-th-list"></span>事件列表
</h3>
<div class="col-xs-5 text-right xuanyuan-panel-btn">
</div>
</div>
</div>
<div class="panel-body">
<form novalidate="novalidate" class="form-horizontal bv-form"
role="form" name="all" id="search_all">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="form-group">
<label class="col-xs-3 col-sm-3 control-label">
开始时间
</label>
<div class="col-xs-9 col-sm-9">
<input readonly type=text class="form-control" name="createdate" id="createdate_start" />
</div>
</div>
</div>
<!--/col-md-4-->
<!--/col-md-4-->
<div class="col-sm-3 col-md-3">
<div class="form-group">
<label class="col-xs-3 col-sm-3 control-label">
结束时间
</label>
<div class="col-xs-9 col-sm-9">
<input readonly type=text class="form-control" name="createdate" id="createdate_end" />
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-9 col-sm-9 pull-left" style="padding-left: 0px;">
<div class="input-group">
<input id="likevalue" class="form-control" value="" type="text" placeholder="搜索标题">
<div class="input-group-btn">
<select id="first-disabled" data-width="auto" class="selectpicker form-control" data-live-search="true">
<optgroup id="selectpicker_0" label="是否已评价">
<option value="">所有</option>
<option value="0">否</option>
<option value="1">是</option>
</optgroup>
</select>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" onclick="ev_search1();" type="button" style="width:40px;">
<span class="glyphicon glyphicon-search" style="height: 20px;padding-top:3px;"></span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!--/row-->
</div>
<table class="table table-hover dataTable"
id="tb_itsmdemo" style="">
</table>
</div>
<!--模态框用于显示数据 -->
<div class="modal fade in modal-scroll" id="mod_DemoForm"
tabindex="-1" role="basic" aria-hidden="true" data-width="600"
style="background-color: #fff; width: 700px; height: 450px; left: 10%; top: 60px;">
<p></p>
<p></p>
<p></p>
<center>
正在加载数据。。。
</center>
</div>
</div>
<script src="<%=path%>/style/js/jquery.dataTables.js"
type="text/javascript"></script>
<script src="<%=path%>/style/js/dataTables.bootstrap.js"
type="text/javascript"></script>
<script src="<%=path%>/style/js/bootstrapValidator.js"
type="text/javascript"></script>
<script src="<%=path%>/style/js/commonForm.js" type="text/javascript"></script>
<script src="<%=path%>/style/js/date/datetimepicker.min.js" type="text/javascript"></script>
<script src="<%=path%>/style/js/date/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="<%=path%>/style/js/jquery.raty.js"></script>
</body>
<script>
jQuery(document).ready(function() {
$('#createdate_end').datetimepicker({
format:'yyyy-MM-dd hh:ii:ss',//日期 格式 yyyy-MM-dd(默认),yyyy-MM-dd hh:mi,yyyy-MM-dd hh:ii:ss,yyyy-MM
minView:0, //0-4 日期选择出现的选择页面对应startview的值
})
$('#createdate_start').datetimepicker({
format:'yyyy-MM-dd hh:ii:ss',//日期 格式 yyyy-MM-dd(默认),yyyy-MM-dd hh:mi,yyyy-MM-dd hh:ii:ss,yyyy-MM
minView:0, //0-4 日期选择出现的选择页面对应startview的值
})
$("#mod_DemoForm").on("hide.bs.modal", function(){//每次打开模态框前清除里面数据
$(this).removeData("bs.modal");
});
$('#search_ItsmDemo').bootstrapValidator({
fields: {
'userName': {
message: '用户名验证失败',
validators: {
stringLength: {
min: 0,
max: 30,
message: '用户名长度在6-30个字符之间！'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能是拼音字母、数字或下划线组成'
}
}
},
'mobile': {
validators: {
digits: {
message: '只能填写数字!'
},
stringLength: {
min: 0,
max: 11,
message: '长度在8-11之间'
}
}
}
}
});
var tb_itsmdemo= $('#tb_itsmdemo').dataTable( {
"processing": true,
"serverSide": true,
bAutoWidth:false,//固定列宽则设在为false，默认true
bSort:false,//默认true 排序
"bLengthChange":true,//下拉分页框
"aLengthMenu":[[10,20, 50, 100, "-1"],
[10,20, 50, 100, "全部"]
],
"ajax": {
async:false,
"url": "<%=baseURL%>/incidents/itsmIncidentSatisfactionListBySql.action",
"type": "POST",
"data": function ( d ) {
//d.evaluate= $('#evaluate').val();
//时间段
d.createdate_start=$("#createdate_start").val(),
d.createdate_end=$("#createdate_end").val(),
d.evaluate = $("#selectpicker_0 option:selected").eq(0).val();
d.likevalue = $('#likevalue').val();
}
},
"iDisplayLength":10,//每页显示行数，不设置默认为10,
"columns": [
{title:'', "data": null,//放在第一列用于隐藏排序时第一列自带的小图标
visible:false
},
{title:'序号', "data": null,width:'60',"bSortable": false },//显示行号
{title:'编号', "data": "incident_id" ,width:'150',render:function(data,tpye,row){
var rid = '"'+row.incident_id+'"';
var new_title = data;
return "<a style='cursor: pointer;' onclick='view("+rid+")' title='查看'>"+new_title+"</a>";
}},//显示行号
{title:'标题', "data": "title",width:'150',render:function(data,tpye,row){
var rid = '"'+row.incident_id+'"';
var new_title = data.substr(0, 30);
return "<a style='cursor: pointer;' onclick='view("+rid+")' title='查看'>"+new_title+"</a>";
}
},
{title:' 服务目录', "data": "svc_name",render:function(data,tpye,row){
if(data==null){
return "";
}else{
return data;
}
} },//显示行号
{title:"评价结果", "data": "ppg",render:function(data,tpye,row){
if(data!=undefined&&data!=""){
return "<div id='"+row.incident_id+"'></div> "; //raty 生成的固定格式 ，一定要有一个div
}else{
return "未评价";
}
} },
{title:"提交时间","data": "evaludatetime","bSortable": true,render:function(data,tpye,row){
console.log(data);
if(data!=undefined&&data!=""){
return toFullDate(data);//显示所有时间用 toFullDate 只显示日期toOnlyDate
}else{
return "未评价";
}
}
},{title: "操作","data": "evaluate","bSortable": false,render:function(data,tpye,row){
var rid = row.incident_id;
var url_add = '"<%=baseURL%>/itsmsatisfactionrec/add.action?app_id='+rid+'"';
var url_view = '"/itsmsatisfactionrec/view.action?app_id='+rid+'"';
if(row.type_name=="已关闭"){
if(row.evaluate == '1'){
var itsmSatisfactionUrl = '"<%=baseURL%>/incidents/getIncidentSatisfactionDiv.action?incidentid='+rid+'&bootStrap=2"';
return "<a onclick='viewContent("+itsmSatisfactionUrl+");'><span class='badge' style='font-size:14px;background-color: #5CB85C; border-color: #5CB85C;'>查看详情</span></a>"
}else{
return "<a onclick='viewContent("+url_add+");'><span class='badge' style='font-size:14px;background-color: #F0AD4E; border-color: #F0AD4E;' >添加评价</span></a>"
}
}else{
return "";
}
}}
] ,
"createdRow": function ( row, data, index ) {//将序号赋值给第二列
$('td', row).eq(0).html((this.dataTableSettings[0]._iDisplayStart+index+1));//eq(1)指每行第二列
console.log(data.ppg);
$('td>div',row).eq(0).raty({ //创建完一行之后就拿到tr下有div的cell 然后初始化raty ，具体的写初始化的方式参看：E:\java学习笔记\jquery插件\raty星级评价\index.html 页面
readOnly: true,
start: data.ppg,
path: '../style/img/', //\portal\itsm\style\img\star-half.png
showHalf: true,
});
},
"drawCallback": function( settings ) {
if(settings.iDraw>1){
parent.reSetFrameSize("frmmain");
}
}
} );
});
function view(id){
var url='<%=baseURL%>/incidents/views.action?id='+id+'&satisfaction=true';
window.open(url,"","left=150,top=100,height=610,width=1000,status=no,toolbar=no,menubar=no,location=no,resizable=no,resizable=yes,scrollbars=yes");
}
//查看详情
function viewContent(url){
ev_openMod(url,700,400,"");
}
document.onkeydown=keyDownSearch;
function keyDownSearch(e) {
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
ev_search1();
return false;
}
return true;
}
function ev_search1(){
var tb_itsmdemo=$('#tb_itsmdemo').dataTable();
if(tb_itsmdemo!=undefined){
tb_itsmdemo.fnClearTable( 0 );
tb_itsmdemo.fnDraw();
}
}
</script>
</html>
显示效果如下:
5 提交时注意的事项
在初始化raty的时候会生成一个hidden的input,如下:
raty.js 中生成input的代码:
6.readme.txt
/**
* jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty
* --------------------------------------------------------------------------
*
* jQuery Raty is a plugin that generates a customizable star rating automatically.
*
* Licensed under The MIT License
*
* @version 0.5
* @since 11.06.2010
* @author Washington Botelho dos Santos
* @link http://wbotelhos.com/raty
* @twitter http://twitter.com/wbotelhos
* @license http://www.opensource.org/licenses/mit-license.php MIT
* @package jQuery Plugins
*
* Thanks to:
* --------------------------------------------------------------------------
* @glbenz
* @franciscosouza
*
* Usage (default values):
* --------------------------------------------------------------------------
* $('div#star').raty({
* cancelHint: 'cancel this rate!', // The hint information.
* cancelOff: 'cancel-off.png' // Name of the cancel image off.
* cancelOn: 'cancel-on.png' // Name of the cancel image on.
* cancelPlace: 'left', // Position of the cancel button.
* hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], // A hint information for default 5 stars. 提示每颗星的title(默认是5个)
* number: 5, // Number of star. 默认是多少颗星
* path: 'img, // Path of images. 图片的路径
* readOnly: false, // read-only or not.
* scoreName: 'score', // The name of target score.
* showCancel: false, // If will be showed a button to cancel the rate.
* showHalf: false, // Active the half star.
* starHalf: 'star-half.png', // The image of the half star.
* start: 0, // Start with a score value.
* starOff: 'star-off.png', // Name of the star image on.
* starOn: 'star-on.png' // Name of the star image on.
* //onClick: function() { alert('clicked!'); } // A default function can to be setted here.
* });
*
* <div id="star"></div>
*
* Public functions:
* --------------------------------------------------------------------------
* $.fn.raty.start(3); // Starting the rating with 3 stars later.
* $.fn.raty.readOnly(true); // Adjusts the rating for read-only later.
* $.fn.raty.click(2); // Click in a star later.
*
* Should come after the current raty and before the anothers one. Because it takes the last called raty.
*
*/
扫一扫
3011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
