首页 > 代码库 > jQuery EasyUI 使用笔记
jQuery EasyUI 使用笔记
大家有四次抢票机会。第一次是放票时间之后的30分钟。第二次机会是开车前的15天。第三个机会是开车前的48小时。第四个机会是开车前的24小时。
1.导入js
2.datagrid重新加载
3.弹出div,打开新页面
4.实现分页
5.双击
6.嵌套子表格
导入JS,CSS
<link href="http://www.mamicode.com/Themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="http://www.mamicode.com/Themes/default/easyui.su.css" rel="stylesheet" type="text/css" />
<link href="http://www.mamicode.com/Themes/icon.css" rel="stylesheet" type="text/css" />
<script src="http://www.mamicode.com/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/JQuery.cookie.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/JQuery.easyui.utility.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/Login/JQuery.browser.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<%-- <script src="http://www.mamicode.com/Scripts/print_btn.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/CommonFn.js" type="text/javascript"></script>--%>
<script src="http://www.mamicode.com/Scripts/datagrid-detailview.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/Scripts/ajaxupload.3.5.js?v=1.1" type="text/javascript"></script>
--datagrid修改数量,uppnumber()要定义在.aspx文件里面
{ field: "qty", title: ‘数量‘, width: undefined, align: ‘center‘, sortable: true, formatter: function (value, row, index) {
if (row.gi_code != "页合计" && row.gi_code != "总合计") {
return ‘<input name="pnumber" dno="‘ + row.DNO + ‘" value="http://www.mamicode.com/‘ + value + ‘" type="text" style="width:78px;" class="easyui-numberbox" onChange="uppnumber(this.value,‘ + row.DNO + ‘)"/>‘;
}
else {
return value;
}
}
},
//修改数量
function uppnumber(qty, id) {
if (qty > 0) {
$.ajax({
url: url + "?action=pnumber",
type: "post",
data: { qty: qty, dno: id },
success: function (msg) {
//infoalert(msg);
$("#tb_PODetail").datagrid("reload"); //可以注释
}
});
}
else {
$(this).val("")
alert("采购数量要大于0!");
}
}
datagrid 重新加载 ?
// 加载，分页时会从第1页开始$(‘#dg‘).datagrid(‘load‘, { code: ‘01‘, name: ‘name01‘});// 重新加载，分页时加载当前页数据，你要的刷新，应该是用这个，如果只是刷新，不需要参数，可以直接使用 $(‘#dg‘).datagrid(‘reload‘);$(‘#dg‘).datagrid(‘reload‘, { code: ‘01‘, name: ‘name01‘});
弹出div $("#div_Search").dialog("open");
打开页面 openModalDialog("GoodsEdit.aspx?code=" + row.code);
分页 Request.Form["page"]
Request.Form["rows"]
int start = ((Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim())) + 1;
int end = (Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim()) + Convert.ToInt32(Request.Form["rows"].ToString().Trim());
返回json
//1 result2 = "{\"total\":" + "200" + ",\"rows\":" + result + "}"; total 总行数,rows 显示的row
//2 json += ",\"pagetotal\":\"" + dt.Rows.Count + "\",\"skucount\":\"" + dt2.Rows.Count + "\",\"skutotal\":\"" + itotal + "\"" + "}"; 自定义右下角显示的数据
//1 双击row
onDblClickRow: function (rowIndex, rowData) {
var row = $("#tb_GoodsList").datagrid("getSelected");
if (row != undefined) {
<%if(Otype=="1"){ %>
window.returnValue = http://www.mamicode.com/row;
window.close();
<%}else{ %>
openModalDialog("GoodsEdit.aspx?" + "id=" + row.gi_id + "&tt=1");
$("#dg_GoodsList").datagrid(‘reload‘);
<%} %>
}
}
//2 嵌套datagrid
view: detailview,
detailFormatter: function(index, row){
return ‘<div style="padding:2px"><table id="ddv-‘ + index + ‘"></table></div>‘;
},
onExpandRow: function(index, row){
$(‘#ddv-‘+index).datagrid({
url: url + "?action=detaillist&oid=" +row.pc_id,//后台Request["oid"]
fitColumns: false,
pagination: true,
pageSize: 15,
pageList: [15, 30, 90, 120],
showFooter: true,
striped: true,
rownumbers: true,
singleSelect: true,
autoRowHeight: true,
loadMsg:‘‘,
height:‘auto‘,
columns:[[
{ field: "pi_id", title: "id", hidden: true },
{ field: "gi_code", title: "商品编码", width: undefined, align: ‘center‘ },
{ field: "gi_shortname", title: ‘商品简称‘, width: undefined, align: ‘center‘ },
{ field: "gs_name", title: ‘规格‘, width: undefined, align: ‘center‘ },
{ field: "gi_unit", title: ‘单位‘, width: undefined, align: ‘center‘ ,sortable:true},
{ field: "gi_importprices", title: ‘销售价‘, width: undefined, align: ‘center‘ ,sortable:true},
{ field: "pi_kc", title: ‘库存数量‘, width: undefined, align: ‘center‘ },
// { field: "pi_jbkc", title: ‘警戒库存‘, width: undefined, align: ‘center‘ },
{ field: "pi_number", title: ‘采购数量‘, width: undefined, align: ‘center‘},
{ field: "pi_price", title: ‘采购单价‘, width: undefined, align: ‘center‘},
{ field: "pi_allmoney", title: ‘总价‘, width: undefined, align: ‘center‘},
]],
onResize:function(){
$(‘#west_dg‘).datagrid(‘fixDetailRowHeight‘,index);
},
onl oadSuccess:function(){
setTimeout(function(){
$(‘#west_dg‘).datagrid(‘fixDetailRowHeight‘,index);
},0);
}
});
$(‘#west_dg‘).datagrid(‘fixDetailRowHeight‘,index);
}
1、使用这个subGrid的视图，需要使用到官网提供的datagrid-detailview.js，其中帮我们定义好了detailView这种显示视图。
在使用过程中，我们只需要在主datagrid中将默认的view用detailView替换掉就可以了。
2、detailFormatter，也就是生成的detail中的初始代码，这里放入一个table，之后可以将其动态创建成datagrid。
3、当主datagrid刚刚初始化完成时，并不显示subGrid，此时subGrid并没有存在的必要，我们也不去创建它。
那什么时候去创建它呢？当我们展开主datagrid中的某条数据的时候，也就是在onExpandRow事件中，才去创建一个它“管辖”的subGrid。
4、创建subGrid的方法和一般创建datagrid的方式差不多，但是后面多了一些fixDetailRowHeight的操作
fixDetailRowHeight这个方法主要是为了调整subGrid的高度用的，如若不加，可能会造成subGrid的高度会出现错位的情况。
不过这里setTimeout的时间为0，那和直接调用function又有什么区别呢？
jQuery EasyUI 使用笔记