<!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>
参见:http://testweb3.iecworld.com/jsdemo/js/lq_js_point/
<!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>
<%@ 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>
在初始化raty的时候会生成一个hidden的input,如下:
raty.js 中生成input的代码:
/** * 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. * */