jqgrid通用编辑规则; 下载文件; 点击图片翻转显示文字; 统计; 星际评分条; 树形结构

jqgrid通用编辑规则

使用 editoptions ,主要用于定义勾选或者未勾选时的值,例如editoptions: { value:"Yes:No" }

<input type="checkbox" value="Yes" offval="No".../>

当value为yes,checkbox被勾选,否则未勾选。值将会作为参数传递到jqGrid配置的editurl中。

 

下载文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>要下载的文件</p>

<a href="txt/get.txt" download="get">get.txt</a>

</body>

</html>

测试文件:test3/minmin/download.html

 

点击图片翻转显示文字

点击图片,则调用changePage方法

<script type="text/javascript">

$(function () {

$('.pagination li').click(changePage);

$('.portfolio-item').magnificPopup({

type: 'image',

gallery:{

enabled:true

}

});

});

</script>

切换图片

移除图片,显示当前的div

function changePage(event) {

  var pageNo = $(this).html();

  $('.portfolio-page').hide();//实现图片的隐藏

  $('#page-' + pageNo).fadeIn();//以渐退的方式隐藏

  $('.pagination li').removeClass('active');//removeClass() 方法从被选元素移除一个或多个类。

  $(this).addClass('active');

//addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

}

测试文件:test3/flip项目

 

统计

data-percent 显示的信息为圆形统计,不需要添加额外图像文件

    //canvas将百分比以图形的形式显示出来

    var initPieChart = function() {

        $('.percentage').easyPieChart({

          barColor: '#BF1F42',

          trackColor: '#1E4598',

          scaleColor:false,

          lineCap: 'round',

          lineWidth:50,

          borderRadius:0,

          animate: 1000,

          size:395

        });    

}

//初始化饼图

    $(function(){

        initPieChart();

    });

测试文件:test3/tongji.html

 

 

星际评分条

分为十分制和百分制

function rat(star,result,m){

 

star= '#' + star;

result= '#' + result;

$(result).hide();//将结果DIV隐藏

 

$(star).raty({

hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],

path: "css/img",

starOff: 'star-off-big.png',

starOn: 'star-on-big.png',

size: 24,

start: 40,

showHalf: true,

target: result,

targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失

click: function (score, evt) {

//第一种方式:直接取值

alert('你的评分是'+score*m+'分');

}

});

}

测试文件:test3/rankScore/index.html

 

树形结构

var dataSource1 = function(options, callback){

var $data = null

if(!("text" in options) && !("type" in options)){

$data = tree_data;//树的根节点

callback({ data: $data });

return;

}

else if("type" in options && options.type == "folder") {

if("additionalParameters" in options && "children" in options.additionalParameters)

$data = options.additionalParameters.children || {};//给父节点绑定子节点

else $data = {}//no data

}

 

if($data != null)//此setTimeout仅用于模仿一些随机延迟 setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

}

测试文件:test3/treeview.htm

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值